Question

Bootstrap的优点在于它能够对列进行重新排序，而不管HTML的结构如何，但是在较小的视口尺寸（例如移动设备）下，我希望这些特定元素具有不同的顺序。

HTML的结构类似于：

[Page Content]
[Nav Links]
[Sidebar]

分别在[Nav Links]和[Sidebar]上使用Bootstrap 4.1及其顺序优先/顺序最后的类，页面将适当地显示如下：

[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

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

要在断点订购

Answer 2

question has been answer before的Zim

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

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

2 个答案: