Html 引导4x：能否根据视口大小更改列顺序？

Bootstrap能够在不考虑HTML结构的情况下对列进行重新排序，这一点非常好，但是我希望在较小的视口大小（例如Mobile）下，这些特定元素的顺序有所不同

HTML的结构类似于：

[Page Content]
[Nav Links]
[Sidebar]

并分别在[Nav Links]和[Sidebar]上使用Bootstrap 4.1及其order first/order last类，页面适当显示如下：

[Nav Links] [Page Content] [Sidebar]

然而，当视口缩小到“中断阈值”以下时，我希望[Nav链接]像一个好小伙子一样回到[Page Content]下面。Bootstrap文档似乎没有涉及到这种实现，尽管我在这里发现了一个类似于以前Bootstrap版本的问题，但所描述的方法使用的类已经被删除。有人有什么建议吗

（实际代码如下，以防万一我遗漏了什么）

[网页内容]
[导航链接]
[侧边栏内容]

是，您可以使用网格的订单类（使用flexbox）

[网页内容]
[导航链接]
[侧边栏内容]

在断点处下单

是的，您可以使用订单-{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>

1.
3.
2.

Aha！我需要的是

命令sm-#

，但效果很好！非常感谢你！

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

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