Bootstrap 4x: Can you change column order based on viewport size?

Bootstrap 4x: Can you change column order based on viewport size?

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).

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>


html css bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive

Login Form in HTML CSS | Login Page in HTML CSS Bootstrap

Download Link: https://drive.google.com/file/d/1acIep5LBxATRiGx0kdcFNbLlAVTHx__Y/view?usp=sharing This example shows you how to create a simple and sample lo...

Login Form HTML CSS | Bootstrap 5

Using Bootstrap 5 to create a Login Form HTML CSS. We create a basic login form HTML css code through the Bootstrap Framework. If you are looking for a login form HTML template that does the basics, this should have you covered. Using a starter template, we create a new project and go through the process of how to login form HTML CSS.

Pricing Table HTML, CSS | Bootstrap 5

Creating a Pricing Table that is responsive in the latest Bootstrap 5 using their example as reference. Using bootstrap we create a pricing table using basic HTML and CSS. Creating Bootstrap 5 template. HTML Pricing Table Header. Pricing List Table. Pricing Card Layout. Pricing Table Column Row Design. Responsive Pricing Table html css. Pricing Table Button

Creating a Login Form using HTML, CSS and Bootstrap 5

Learn how to create a login form using HTML, CSS and Bootstrap 5. Using Bootstrap 5 to create a Login Form HTML CSS. Login Form HTML CSS | Bootstrap 5