Bootstrap has a great many features. One of the main features that is used in pretty much every Bootstrap project I've ever seen is the grid system. The grid system provides a great tool to scaffold and build out any number of projects.
Today, we'll be looking at a lesser known grid feature, the grid column ordering classes. It is a simple feature, understated on their docs, but very powerful in the right scenarios.
What Is Column Ordering?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
Table of Contents
For example, let's say we have 3 columns (A, B, and C) on large screens. B will be the most prominent item we have. Right in the middle, front and center.
On mobile devices, this grid will collapse to be A on top of B on top of C. We want B to take higher precedence, though, since it's our most important element. We want it to be placed on the very top.
This is what we want for mobile devices:
How can we achieve this? Bootstrap provides a great way to handle this scenario, the push and pull column classes.
The Push and Pull Classes
The classes are used along with the Bootstrap grid classes of
The push and pull classes applied to the Bootstrap grid are
.col-xs-pull-#. That also works with
push class will move columns to the right while the
pull class will move columns to the left.
Now that we know what the classes are, let's take our above example and turn that into working HTML and CSS. We will need to create the 3 different sections for large screens. This is easy enough. The code will look like:
<div class="row"> <div class="col-md-4"> <div class="alert alert-info">A</div> </div> <div class="col-md-4"> <div class="alert alert-danger">B</div> </div> <div class="col-md-4"> <div class="alert alert-info">C</div> </div> </div>
This gives us:
We now have our grid for medium to large devices (desktops). Now this is where we will have to add in the
pull classes to accommodate the different order for mobile. Now we could add the push and pull classes here, but we have to make a quick adjustment first.
We must rearrange our HTML content to accommodate the B being above all the other content. This will move things for us so that we take more of the mobile first approach that is built into the Bootstrap grid. By rearranging our content, we now have:
<div class="row"> <div class="col-md-4 col-md-push-4"> <div class="alert alert-danger">B</div> </div> <div class="col-md-4 col-md-pull-4 col-sm-6"> <div class="alert alert-info">A</div> </div> <div class="col-md-4 col-sm-6"> <div class="alert alert-info">C</div> </div> </div>
The grid is much easier to see this way since we now just have to add push and pull classes for medium devices and above. Our grid will now behave the way we expect! Go ahead and resize your browser and see how our grid works:
Tips for Reordering Columns
Take the Bootstrap approach and create your content mobile first. It is easier to push and pull columns on larger devices than it is on smaller devices. This is why you should focus on your mobile ordering first, and then move up.
Here are a few more examples:
With this simple technique, we are able to rearrange columns without too much fuss. I've seen some developers use hide and show classes to show different grids on small to large devices but these column reordering classes take care of all that for us.