In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.
By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.
So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)
<div class="container">
<h2>Without column ordering</h2>
<div class="row">
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
</div>
</div>
<h2>With column ordering</h2>
<div class="row">
<div class="col-sm-6 order-sm-12">
<img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-sm-1">
<img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
</div>
</div>
<h2>12 columns - Descending Order</h2>
<div class="row">
<div class="col-sm-6 order-12">
<img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-11">
<img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-10">
<img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-9">
<img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-8">
<img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-7">
<img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-6">
<img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-5">
<img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-4">
<img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-3">
<img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-2">
<img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
</div>
<div class="col-sm-6 order-1">
<img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
</div>
</div>
<h2>12 columns - Ascending Order</h2>
<div class="row">
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
</div>
<div class="col-sm-6">
<img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
</div>
</div>
</div>
Alongside this, we added the following CSS, although this isn’t particularly required for our example:
* {
font-family: 'Roboto', sans-serif;
}
h2 {margin-top:2em;}
.container {
padding: 2rem;
}
.order-sm-12 img {
border: 5px solid orange;
}
.order-sm-1 img {
border: 5px solid blue;
}
In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.
Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.
We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉
