Responsive Bootstrap Layouts

A Guide to Column Ordering & Stacking in Bootstrap 3

Bootstrap 3's responsive grid is powerful, but getting columns to stack nicely in the desired order can be tricky. Here are some working examples and guidance that will help to make your responsive design life easier. You will find some tricks on using Bootstrap's push and pull classes to think "mobile-first".

These 4 grid sizes (xs, sm, md, lg) enable you to control grid behavior on different devices (desktop, laptops, tablet, smartphone, etc..). When Web browser width changes, the Bootstrap CSS media queries (breakpoints) "kick-in" to change the width of the columns and in some cases stack the columns vertically.

Why Use Column Ordering? A Simple Use Case.

Often, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. This typical 2 column page layout is where we can see the most common use case for column ordering. Using the Bootstrap col-*-push-* and col-*-pull-* CSS classes we're able to utilize the real power of the Bootstrap grid.

When the sm breakpoint of less than 992 pixels is reached, the columns stack vertically and become 100% width. This places the sidebar above the main content on smaller devices.

However, the above example placed the sidebar above the main content which may not be desirable since the sidebar will push down the main content requiring users to scroll down on smaller devices. To resolve this, we use Bootstrap's push and pull classes to order the columns. The markup using push and pull changes to:

Using the push and pull classes we've pushed the 2nd column all the way to the right,
and pulled the 3 smaller columns back to the left. Now we have the desired layout:

Nest Smaller Inside Larger

Another rule to follow when creating ordered columns is to place the desired smaller layout columns, inside the larger layout columns using nesting.

Sometimes a simple pushpull won't work because of the desired column order. However, Bootstrap allows us to nest rows and col-* inside other col-* which enables us to have more control over when columns stack vertically at specific breakpoints. If we remember this, while continuing to think "mobile-first", we can nest the desired smaller device layout inside the larger layout like this...

Height Matters

Bootstrap columns always float left until stacked. As a result, shorter columns that exceed the 12 column total will naturally keep to the right of taller columns. When columns are about the same height, they stack into rows when the columns total exceeds 12 like this..

Not every case is suitable for push-pull, but if you understand the principal of mobile-first, it will make creating layouts much easier. In some cases it's necessary to float columns using the pull-left and pull-right classes. Of course there are exceptions to the rule. You'll see that in example #8 below pull-right is used, and not the mobile-first rule.