1

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>
Annunakitty
  • 21
  • 1
  • 5

2 Answers2

3

Yes you can use the order classes for the grid (which uses flexbox) https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

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

To order at breakpoints

DGS
  • 6,015
  • 1
  • 21
  • 37
1

This question has been answer before by Zim

Yes you can change the column order based on viewport size using order-{size}-{order number}. 

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>
bharney
  • 41
  • 1
  • 4