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 the Bootstrap 3 grid comes in 4 sizes (or "breakpoints"). Tiny (for smartphones
.col-xs-*), Small (for tablets
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
In general, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. A typical 2 column page layout is where we encounter a common use case for column ordering.
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
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
is used to keep the sidebar on the left. As a result, our main content appears first on smaller devices.
Now let's consider a slightly more complex scenario to demonstrate why it's always important to think "mobile-first" when it comes to column ordering.
Here is a 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).
Since all Bootstrap columns float left until stacked, shorter columns will naturally wrap 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.