Reordering of Columns Using Bootstrap 4 Push Pull Classes
In this blog post, we will see as to how to carry out columns reordering with the help of Bootstrap 4 Push Pull classes.
Frequently we come across a situation when we need distinctive columns order on desktop view and diverse on a mobile, where all columns swings to full width components. As it happens there is simple approach to do this in Twitter's Bootstrap.
So essentially we will turn this accordingly, with the help of CSS classes:
Initially mobile:
Title of this post is somewhat dubious, on the grounds that what we are really going to do is alter the columns order (columns reordering) on the desktop, not on mobile. So our beginning format is mobile view and we have to place HTML in the way we need see it on a mobile.Push and pull:
Now it's the stage to move our columns. To do this, we have to utilize push and pull classes. Fundamentally, of course in Bootstrap there exists a 12 columns grid in this way, while moving elements we have to ascertain by what number of spots its should be moved. E.g. in the event that we have 3 columns (4 of 12 each) and we require to move initial one to the last position, we have to "push" it by 8 places. Comparable circumstance happen when we need to move last column on the first position, at that point we have to "pull" it by 8 places.
In order to get the desired view, in this step, we have to push first column by 4 places, at that point push second column additionally by 4 places and pull the last column by 8 places. Presently the markup will resemble this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-push-4 col-3 my-col">
3
</div>
<div class="col-sm-4 col-sm-push-4 col-2 my-col">
2
</div>
<div class="col-sm-4 col-sm-pull-8 col-1 my-col">
1
</div>
</div>
</div>
2
</div>
<div class="col-sm-4 col-sm-pull-8 col-1 my-col">
1
</div>
</div>
</div>
