How to Reorder Columns with Bootstrap 4 Order Classes

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one it finds under the .row class.

Remember to Write Your Code “Mobile First”

What is mobile first? It basically means the HTML and CSS you first send to the browser are for mobile devices. So you should write your HTML markup in the order you want it to appear on mobile. Then use the order classes to rearrange things on larger devices like a forklift moves boxes around.

Below is the result of the code above.

A two column grid with the images 100% width of the column. Since each column has a class .col-sm-6, each column will be 100% width on mobile.

Now, how would you make the B column swap positions with A column on mobile?

So on mobile it will be BA and on everything else it will be AB.

To do this, you would need to set the source code to be in the order you want it to be on mobile. Then add the order classes to the columns specifying the order at the breakpoint you choose. In our case we want SM and up. Using Bootstrap’s order classes you can essentially move columns around like a forklift.

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

.order-sm-12

Add this class to the first column to push it to the last position to the right. Remember Bootstrap is based on a 12 point grid system.

.order-sm-1

Now add this class to the second column to move the column to the left starting position.

Here is the final result

View Code Demo

How does Bootstrap 4 Order (push pull) work?

Bootstrap 4 uses CSS flexbox for the grid system. So the column ordering essentially applies an order property to the flex item you are moving. If you are new to flexbox, I have a flexbox cheat sheet you may find useful.

Conclusion

The most important thing to remember is the Bootstrap CSS Framework is mobile first. Write your markup how you want it to be displayed on mobile devices.

Then apply the .order-* classes to reorder things at different breakpoints. Always keeping in mind your classes need to add up to 12 columns.