How to Achieve Column Reordering with Bootstrap 4

Responsive web pages are websites that adjust to different screen sizes. Audi.com, in 2001 was one of the websites to adopt this design.

Bootstrap is one of the most popular CSS frameworks for building responsive web pages.

It has a simple way of organizing, positioning and displaying elements using column reordering, which I discovered when working on my HTML & CSS capstone project at microverse. As the name implies, the concept allows you to reorder columns based on the screen size of the device used to view the page.

In this publication, I am going to show how to reorder columns using bootstrap. At the time of writing, the current version of bootstrap was 4.1, hence refer to the implementation of this concept in the version of bootstrap you are using to achieve the desired results.

To start, by default, all columns have an order value of 0 but I assigned class “order-1” to the desired columns. This if omitted will still display columns based on their appearance in the code.

See code and output below:

As seen, I did not use any order class, hence the columns appeared in the order in which they appeared in the code. Now let’s see what happens when we alter their order.

It can be seen that the columns that did not have order classes were given precedence over those that had, and those that had order classes appeared according to the order value assigned to them.

Now let’s reorder the columns based on screen size:

The above snippet shows that on medium-sized screens (MD) the columns are displayed based on the order value assigned to them. This means if it is required that the order changes on let’s say large screens, then

order-lg-[value]

Protip: column reordering only works on bootstrap columns: col-[xx], container or container-fluid, not rows

The image below shows a practical example of column reordering where I built an online sneaker shop that required column reordering on different screens sizes.

the big shoe moves to the top on small screens due to column reordering.

In conclusion, column reordering makes arranging content easy and allows the designer to bring into focus the main item when necessary.