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".
General Column Ordering Tips
In sequential order, here's my approach to designing Bootstrap layouts:
- Think mobile first
- Nest smaller layout inside larger layout
- Height matters
- Don't panic, just float
- When all else fails, use the responsive utility classes
Keeping these tips in mind, let's look at how we can apply this logic to building Bootstrap layouts where we want to achieve a specific column order for the purpose of improved SEO and/or UX.
Responsive Grid Basics
Hopefully you already know that Bootstrap's 12 column grid comes in 4 sizes (or "breakpoints"):
- Tiny (for smartphones .col-xs-*)
- Small (for tablets .col-sm-*)
- Medium (for laptops .col-md-*)
- Large (for laptops/desktops .col-lg-*)
These 4 grid sizes (
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-*-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
pull changes to:
<div class="row"> <div class="col-sm-9 col-sm-push-3"> main content </div> <div class="col-sm-3 col-sm-pull-9"> sidebar </div> </div>
Thinking Mobile First
Next let's try a slightly more complex scenario to demonstrate why it's always important to think "mobile-first" when it comes to column ordering.
Consider this layout:
Wrong way: If we think "desktop-first", we start with our desired large screen layout using markup like this:
<div class="row"> <div class="col-md-3"> 1 </div> <div class="col-md-2"> 3 </div> <div class="col-md-2"> 4 </div> <div class="col-md-2"> 5 </div> <div class="col-md-3"> 2 </div> </div>
Right way: But, if we instead think "mobile-first", we first create the desired small screen (phone, tablet, etc..) layout using this markup:
<div class="row"> <div class="col-xs-6"> 1 </div> <div class="col-xs-6"> 2 </div> <div class="col-xs-4"> 3 </div> <div class="col-xs-4"> 4 </div> <div class="col-xs-4"> 5 </div> </div>
Then, we adjust the markup accordingly for larger devices:
<div class="row"> <div class="col-xs-6 col-md-3"> 1 </div> <div class="col-xs-6 col-md-3 col-md-push-6"> 2 </div> <div class="col-xs-4 col-md-2 col-md-pull-3"> 3 </div> <div class="col-xs-4 col-md-2 col-md-pull-3"> 4 </div> <div class="col-xs-4 col-md-2 col-md-pull-3"> 5 </div> </div>
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
pull won't work because of the desired column order. However, Bootstrap allows us to nest
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...
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-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.