Bootstrap is great for its ability to reorder columns regardless of the HTML structure, however I would like to have a different order of these particular elements when at a smaller viewport size (e.g. Mobile).

The structure of the HTML is something like:

```
[Page Content]
[Nav Links]
[Sidebar]

```

And using Bootstrap 4.1 and its order-first/order-last classes on [Nav Links] and [Sidebar] respectively, the page appropriately displays like so:

```
[Nav Links] [Page Content] [Sidebar]

```

However, what I would LIKE to happen when the viewport shrinks below the break threshold, for [Nav Links] to go back underneath [Page Content] like a good little fella. The Bootstrap documentation does not seem to go into this sort of implementation, and though I found a similar question on here for a previous Bootstrap version, the described methods use classes that have since been removed. Anyone have any suggestions?

(Actual code follows, just in case I missed something)

```
<div class="row">
    <main class="col-sm-8">
        [Page Content]
    </main>
    <nav class="col-sm-2 px-3 order-first">
        [Nav Links]
    </nav>
    <section class="col-sm-2 order-last">
        [Sidebar Content]
    </section>
</div>

```