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 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>

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 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 🙂


Related articles

  • Artego

    Thank you so much for this small, but very helpful article! Your article make me understand what the principle “mobile first” is and how easy to determine the future structure of an HTML page with this simple principle!
    1). Build your page structure for mobile devices first. All elements on the page should be placed in direct order.
    2). Play with elements ordering for other devices!

    That’s it!

    • Hey Artego! Really nice to hear that my post was useful for you. Good luck with your project and let me know if you have more questions in this scope.

  • Hey Artego! Really nice to hear that my post was useful for you. Good luck with your project!