How to Reorder Bootstrap 4 Columns using Order Classes

Cover image

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.

For eg:

<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

B-A

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.

.order-12 .order-md-1

Add the above class to first column. This will move A to bottom

order-1 order-md-12

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:

col-desktop.png

Final Output will look like this in Mobile:

col-mobile.png

--

Want to create your side projects using Bootstrap 4 faster?

Try (https://www.gridbox.io) and spread the word :)