Re-order columns in mobile devices using bootstrap 3 (without using Flexbox)

Re-order columns in mobile devices using bootstrap 3 (without using Flexbox)

I’m using Bootstrap 3 since its release and it’s really awesome as you already know. But recently I’ve found a great feature on Bootstrap 3 when I dig through their Documentation. It’s a little nifty addition in version 3 but I never noticed because of its less emphasis on the docs.

Re-ordering columns might be the most wished feature in responsive design. So, Bootstrap has added an option to re-arrange columns in mobile devices by adding a simple class without using Flexbox. This is a great option because we don’t have to worry about browser compatibility, because it’s not using the modern Flexbox CSS (even its great).

Push Pull Feature:

Re arrange columns in mobile devices using bootstrap 3

Yes. Push Pull is the new bootstrap feature I’m talking about. So let’s see how we can implement this in a real website.

Problem

Here’s a normal responsive design would look like in desktop and mobile

push-pull-bootstrap-re-order-1

Here’s the layout we want to achieve (see order of div A & B in mobile)

push-pull-bootstrap-re-order-2

Solution

Solution is really simple. Just add a .col-md-push-* and .col-md-pull-* modifier classes

Eg:

<div class="row">
   <div class="col-md-6 col-md-push-6">B </div>
   <div class="col-md-6 col-md-pull-6">A</div>
 </div>

Remember Bootstrap is Mobile first. So we are not changing the order from desktop to mobile. Instead we change the order from Mobile to Desktop. Write code for mobile and add push pull for desktops.

Also, If you are wondering how it works, Here is the CSS

.col-md-push-6 {
left: 50%;
}

.col-md-pull-6 {
right: 50%;
}

Conclusion

I have used this method in several sites recently and found no issues. But be sure to check yourself before using it. You can also use Flexbox CSS to re-order columns if you are planning to support modern browsers only.

Hope you find this article useful. Let me know your thoughts via comments.

Surjith is an experienced Web/UX Designer and Developer based in India. He helped different startups and MNC's to make their websites/applications more efficient and usable using latest web technologies. He is also the Editor of Web3Canvas

  • Hi mate, thanks for sharing.
    I think your html code is wrong for classes. Only say that.

    • web3canvas

      Sorry. I didn’t understand what you mean. Could you describe?

      • Yes, Will be in this way?

        B
        A

        Using pull for A column

        • web3canvas

          Oh. Yes. Thank you. I will correct it.

  • Вадим Камышников

    Realy intersting. I don’t know this. THX