Bootstrap 4x：您可以根据视口大小更改列顺序吗？ [复制]

Question

Bootstrap 非常适合对列重新排序而不管 HTML 结构如何，但是我希望在较小的视口大小（例如移动设备）下对这些特定元素有不同的顺序。

HTML 的结构类似于：

[Page Content]
[Nav Links]
[Sidebar]

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

[Nav Links] [Page Content] [Sidebar]

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

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

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

Answer 1

这个question has been answer beforeZim

是的，您可以使用 order-{size}-{order number} 更改 column order based on viewport size。

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

Answer 2

是的，您可以使用网格的订单类（使用 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>

在断点处排序