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.
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:
will be assigned to the various columns.
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.