javascript
css
preview
A guide to column ordering and 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.
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-*
) and Large (for laptops/desktops .col-lg-*
). The 4 grid sizes 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.
In general, 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 push
and pull
CSS classes we're
able to utilize the real power of the Bootstrap grid.
The layout above is easily achieved using the follow Bootstrap markup. 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.
<div class="row">
<div class="col-sm-3"> sidebar </div>
<div class="col-sm-9"> main content </div>
</div>
Placing the sidebar above the main content may not be desired 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 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>
Since we've placed the main content first, it will appear first when stacked vertically on smaller devices. For the larger widths, push
is used to keep the main content on the right, while pull
is used to keep the sidebar on the left. As a result, our main content appears first on smaller devices.
Now 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 desired 5 column layout:
In this layout, we want the wider columnns (1 and 2) to appear first on smaller devices. On larger devices we want the wider columns (1 and 2) to wrap the outside of the smaller columns (3,4 and 5).
Thinking large screen (desktop, laptop, etc..) first, we would use this markup..
<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>
The markup works on larger screen widths, but on smaller screen widths the columns are in the wrong order..
Thinking small screen (phone, tablet, etc..) first, we create the desired smaller 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>
This markup gives us the small device layout we want, in the order we want..
Next, we work on the large device layout by adding the appropriate larger screen (md) column sizes..
<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 large device layout...
In thinking , we created the smaller device markup, and then added classes to support the larger device widths. Now we have the responsive layout working with different devices and screen widths.
Another rule to follow when creating ordered columns is to place the desired smaller layout columns, inside the larger layout columns using nesting.
Consider this desired 4 column layout..
A simple push pull won't work in this case 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 , we nest the desired smaller device layout inside the larger layout like this...
<div class="row"> <div class="col-md-4 col-md-push-8 col-xs-12"> <div class="row"> <div class="col-xs-6 col-md-12"><div class="well">2</div></div> <div class="col-xs-6 col-md-12"><div class="well">4</div></div> </div> </div> <div class="col-md-8 col-md-pull-4 col-xs-12"> <div class="row"> <div class="col-xs-12"><div class="well">1</div></div> <div class="col-xs-12"><div class="well">3</div></div> </div> </div> </div>
Bootstrap always columns 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:
But, when we have a taller columns, any shorter columns that follow will automatically float to the right:
When push
or pull
is used, shorter columns no longer float to the right of taller columns.
In some cases it may be necessary to float a column to the left or right to get the layout you want.
Not every use case will work using Bootstrap's push and pull classes.
This page must be refreshed to complete your login.
You will lose any unsaved work once the page is refreshed.
Click "No" to cancel the login process.
Click "Yes" to continue...
Unlimited plys. Unlimited downloads. No Ads.