Quick tips: reordering columns on mobile with Twitter Bootstrap

, ,

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:

into this:

bootstrap-reorder-2

only with CSS classes.

Mobile first

Title of this post is a little tricky because what we are actually going to do is change the columns order on a desktop, not on mobile. So our start layout is mobile view and we need to put HTML in the way we won’t 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 columns. 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. A similar situation happens when we want to move the 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 the first column by 4 places, then push the second column also by 4 places and pull the 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>

Conclusion

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 grateful for all your comments. If you have any Bootstrap topics that bothering you please also leave them below, I will try to put some lights on them in future posts 🙂



Related articles

Having a nice project to code?

pawel@polarbits.co // +48 606 115 330