Re-Order Grid Columns in Bootstrap 5

A key aspect of responsive design that Bootstrap provides is the ability to change the position of content on different devices and screen widths.

---

Why Change Content Order?

A common use-case is a typical 2-column page layout. Often, the vertical stacking of columns is desired on smaller screen devices (tablets & phones) where horizontal space is limited. Arguably, this may also help with SEO as the main content is closer to the top of the page when search engines like Google crawl the page.

Using the Bootstrap 5 ordering classes we’re able to utilize the column ordering feature of the Bootstrap grid. On small (mobile) screens we want to show our main content at the top and then the sidebar nav below.

---

Flexbox Parent & Children

As you may know the Bootstrap 5 grid utilizes Flexbox. The concept of "parent & children" in Flexbox equates to the "row & columns" of the Bootstrap grid. One parent row containing one or more child columns...

<div class="row">
    <div class="col">
         Child 1
    </div>
    <div class="col">
         Child 2
    </div>
    <div class="col">
         Child 3
    </div>
</div>

Natural vs. Visual Order

Notice that the natural order of the columns is:

|---1---|---2---|---3---|

Using the flex ordering CSS classes we can change the visual order of the columns...

<div class="row">
      <div class="col order-2"> Child 1 </div>
      <div class="col order-1"> Child 2 </div>
      <div class="col order-3"> Child 3 </div>
</div>

|---2---|---1---|---3---|

Simple Bootstrap Ordering Demo

As you can see, the columns are in the same natural order, but the visual order has changed by using the order-* classes on the columns.

---

In practice, we would want to change the visual order depending on the screen width. For example, suppose I want this order on larger screens...

|---3---|---2---|---1---|

But on smaller screens I want this (natural) order...

|---1---|---2---|---3---|

We can achieve this using the responsive order-lg-* classes to control the larger (992px and wider) breakpoint:

<div class="row">
    <div class="col border order-lg-3"> Child 1 </div>
    <div class="col border order-lg-2"> Child 2 </div>
    <div class="col border order-lg-1"> Child 3 </div>
</div>

See row 3 of the demo

---

Since Bootstrap provides many ordering classes for all 6 breakpoints you can manipulate the position of columns in exhaustively many ways...

Here's the responsive Codeply with more re-ordering examples

Before wrapping-up let's revisit the 1st use-case of changing the order of a 2-column layout. The markup is soooo simple...

<div class="row">
    <div class="col-sm-3 order-sm-first order-last"> Sidebar </div>
    <div class="col-sm"> Main </div>
</div>

See row 4 of the demo

The use of order-sm-first order-last on the Sidebar translates to "order first on small and wider", and "order last on extra small (xs)".

I hope this has given you a little insight as to how ordering works in Bootstrap 5. Please share your thoughts and questions in the comments.

😎B5

Comments

[Adam T. Carlson]

I'd like to reorder some elements when the device is small enough but I'm not CSS-savvy enough to see how to do it. It's not like my content is complicated but it's not as simple as just a sidebar and main content.

<div class="col-12 rounded-3 p-5">
            <h2>Featured Project</h2>
            <h3>My Project Name</h3>
            <div class="row">
                <div class="col pe-0">
                    <p>Lorem ipsum text description here.</p>
                    <a href="/Projects" target="_self" type="button" class="btn btn-primary btn-lg px-4 gap-3">See all projects</a>
                </div>
                <div class="col-auto">
                    <img src="/Images/featured.png" alt="Screenshot of mobile game" class="rounded img-responsive" />
                </div>
            </div>
        </div>

Normally it's laid out with the <h3> headline on top, then the <p> text description and button left aligned with the image floating to the right. When the viewport shrinks to small enough size (md and smaller, say), I'd like for the <h3> headline to be on top, then image, then text description, then finally button lowest.

I tried using ordering to do that but have no idea how. I could get it right for JUST the smaller screen size, but it looked messed up on larger lol.

I guess I'll just duplicate elements and hide/show them based on viewport size. Not ideal but I think I'll be able to figure that one out.

[Adam T. Carlson]

Yeah that was simple actually, I just had to duplicate the image element. Oh well, at least it's working.

<div class="col-12 rounded-3 p-5">
            <h2>Featured Project</h2>
            <h3>My Project Name</h3>
            <div class="d-lg-none">
                <img src="/Images/featured.png" alt="Screenshot of mobile game" class="rounded img-responsive" />
            </div>
            <div class="row">
                <div class="col pe-0">
                    <p>Lorem ipsum text description here.</p>
                    <a href="/Projects" target="_self" type="button" class="btn btn-primary btn-lg px-4 gap-3">See all projects</a>
                </div>
                <div class="col-auto d-none d-lg-block">
                    <img src="/Images/featured.png" alt="Screenshot of mobile game" class="rounded img-responsive" />
                </div>
            </div>
        </div>