Insights

Bootstrap 3: Column Reordering Using Push And Pull

Column Reordering Using Push And Pull Classes In Bootstrap 3

Bootstrap is well known for it's grid system, and today we're going to look at a lesser known grid feature known as column reordering. In particular, we will be looking at using push and pull in Bootstrap 3.

Prerequisites

Bootstrap 3 is an older version, but many websites still use it! In the head of your HTML document copy the following text.

    
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     

If you are not already familiar with Bootstrap's grid system, here is a link to brush up on your knowledge.

Understanding Column Reordering

First, let's look at a quick example of what we mean by column reordering.

Example of Bootstrap's grid system and column reordering in a desktop view

The image above is two components made for the desktop view. A small image to the left or right, and a bigger space for text. Let's look at what happens in mobile view.

Example of Bootstrap's grid system and column reordering in a mobile view

As expected, the columns rearrange on top of each other. But we don't want the image below the text in the first component, we want the image to appear on top in both components.

Here are the classes used to create the images above.

Example of Bootstrap's grid system and the classes used to create the image reordering


And here's what it looks like in mobile.

Example of Bootstrap's grid system and the classes used to create the image reordering

We want the smaller section (blue) to appear on the top, and to do that we can use Bootstrap's push and pull classes.

Push and pull and pull and push

Firstly, we must remember that Bootstrap CSS Framwork is mobile first. So let's start with writing our markup with the smaller column on top.

Example of Bootstrap's grid system and the classes used to create the image reordering

Next we add the push and pull classes. Don't forget that Bootstrap is based on a 12 point grid system.

Example of Bootstrap's grid system and the push and pull classes used to create the image reordering

 Adding the push and pull classes based on a 12 point Bootstrap grid system

We use push to push the column we want to the right, and pull to pull the column we want from the right.

Multiple column reordering

We can do pull and push with multiple columns as well. Take a look at the following.

 Example of the Bootstrap grid system and the option to do a pull and push with multiple columns

Example of the Bootstrap grid system and the option to do a pull and push with multiple columns

Here, we add the push class to A, and pull to B

Example of the Bootstrap grid system and the option to do a pull and push with multiple columns

Example of the Bootstrap grid system and the option to do a pull and push with multiple columns

Bootstrap 4 and 5 and 6(?)

Unfortunately, pull and push were removed in Bootstrap 4, but fret not, check back soon for another column reordering tutorial for the latest versions of Bootstrap.

Hey, Developers!

We're on the look out for talented developers to join our team.

Think you have what it takes?