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.

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.

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.

And here's what it looks like in mobile.

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.

Next we add the push and pull classes. Don't forget that Bootstrap is based on a 12 point 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.

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

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.