Tutorial

Reorder CSS Columns Using Bootstrap

Draft updated on Invalid Date
    Default avatar

    By Chris on Code

    Reorder CSS Columns Using Bootstrap

    This tutorial is out of date and no longer maintained.

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Chris on Code

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel