Reorder CSS Columns Using Bootstrap

Introduction

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.

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.

A    B    C

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:

B
A
C

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 .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-#.

The push and pull classes applied to the Bootstrap grid are .col-xs-push-# or .col-xs-pull-#. That also works with sm, md, and lg.

The push class will move columns to the right while the pull class will move columns to the left.

Reordering Columns

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:

A    B    C

We now have our grid for medium to large devices (desktops). Now, this is where we will have to add in the push and 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:

B
A
C

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:

See the Pen Column Reordering in Bootstrap by Chris Sevilleja (@sevilayha) on CodePen.

Conclusion

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.

For more on Bootstrap, take a look at our previous tutorials: Understanding the Bootstrap 3 Grid System and Bootstrap 3 Tips and Tricks You Might Not Know.