Reorder Columns For Mobile With Bootstrap 4 And 5

Introduction

This article will teach you how to use Bootstrap's order class to re-order your columns for mobile use. Please read my previous article if you are on Bootstrap 3.

Prerequisites

Knowledge of Bootstrap's grid system. You can read up on Bootstrap 4(B4)'s grid system here and Bootstrap 5(B5)'s system here.

Order Classes

Use the .order- classes to control the visual order of your content. In B4, you can use 1 - 12 across the 5 grid sizes, and in B5, you can use 1 - 5 across 6 grid sizes.

You can use .order-first and .order-last as well. order-first will appear in front of order-1, and order-last will appear behind order-12.

Order Class Example

Click here to see the code.

You'll notice that the columns are No order class first followed by order-2 and then order-1 in the code, however, the order-1 column is displayed first on the webpage.

Reordering For Mobile

With Bootstrap, you need to have a mobile first mindset, so set up your classes for mobile first, before putting in the classes. Here's what I've done for a two column example.

The Code

Desktop View

Mobile View

We want the blue column to appear second on desktop. We can do that by adding an order class to the same class as col-md-6. Add order-md-2 to the class list, and then add order-md-1 to the white column, so that it appears first. Here's what it should look like:

The New Code

New Desktop View

New Mobile View

The blue column now appears second on desktop view, but still first on a mobile phone.

Note: Remember to match grid sizes. In our example we used md, but we can use sm, lg, etc. Check the Bootstrap page for all available sizes.

Help, I've designed for desktop first!

Code

Desktop View

Mobile View

In this example, you'll notice that we've designed for desktop first, and the blue column is where we want it to be, but we want to to be on top for mobile. To make the blue box appear first, we will add order-first order-md-* where * can be 1 - 12 in B4, and 1-5 in B5.

New Code

New Desktop View

New Mobile View

The blue column now appears on top for mobile!

Click here to see the code for the examples above.

Conclusion

Thank you for reading this blog! I hope it helped you better understand column reordering for mobile.