In this post I would like to show you how to reorder columns using Bootstrap. Often we came to situation when we want different colums order on desktop view and different on mobile, where all columns turns to full width elements. As it occurs there is easy way to do this in Twitter’s Bootstrap.
So basically we are going to turn this:
only with CSS classes.
Title of this post is a little tricky, because what we are actually going to do is change te columns order on desktop, not on mobile. So our start layout is mobile view and we need to put HTML in the way we want see it on mobile.
<div class="container"> <div class="row"> <div class="col-sm-4 col-3 my-col"> 3 </div> <div class="col-sm-4 col-2 my-col"> 2 </div> <div class="col-sm-4 col-1 my-col"> 1 </div> </div> </div>
Push & pull
Now it’s time to move our colums. To do this we need to use push and pull classes. Basically, by default in Bootstrap there is 12 columns grid so, when moving elements we need to calculate by how many places its need to be moved. E.g. if we have 3 columns (4 of 12 each) and we want to move first one to the last position, we need to “push” it by 8 places. Similar situation happen when we want to move last column to the first position, then we need to “pull” it by 8 places.
To get the view from the first image in this post we need to push first column by 4 places, then push second column also by 4 places and pull last column by 8 places. Now the markup will look like 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>
As you can see, moving columns in Twitter Boostrap is really simple. All you need to do is put pull and push classes into elements and calculate by how many places you need to move them.
All the code used in this example you can find on my jsFiddle.
I will be very greatfull for all your comments. If you have any Bootstrap topics that bothering you please also leave them bellow, I will try to put some lights on them in future posts 🙂