How to Reorder Bootstrap 4 Columns using Order Classes
Posted in tutorials
If you're considering mobile first approach while building your next project using Bootstrap then order classes will be of great help to you.
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.
<div class="row"> <div class="col-md-6 py-5 col-a"> <h1 class="display-4">A</h1> </div> <div class="col-md-6 py-5 col-b"> <h1 class="display-4">B</h1> </div> </div>
Say if you want to re-order the grid columns in mobile in the following format
Now, how would you make the 2 column swap positions with 1 column on mobile?
So on mobile it will be 2-1 and on everything else it will be 1-2.
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.
Add the above class to first column. This will move A to bottom
Now add this class to the second column. This will move B to top
Here is the final code
<div class="row"> <div class="col-md-6 py-5 order-12 order-md-1 col-a"> <h1 class="display-4">A</h1> </div> <div class="col-md-6 py-5 order-1 order-md-12 col-b"> <h1 class="display-4">B</h1> </div> </div>
Final Output will look like this in Desktop:
Final Output will look like this in Mobile:
Want to create your side projects using Bootstrap 4 faster?
Try (https://www.gridbox.io) and spread the word :)