Bootstrap 4 - 移动设备中 5 列布局的更改顺序

Question

我有一个包含 3 列的页面，如下所示：

<div class="row">
   <div class="col-lg-3">
        <div>**Section 1**</div>
        <div>**Section 2**</div>
   </div>
   <div class="col-lg-6">**Section 3**</div>
   <div class="col-lg-3">
        <div>**Section 4**</div>
        <div>**Section 5**</div>
   </div>
</div>

我想改变手机中部分的顺序，如下图：

Answer 1

这里有 2 个选项...

响应式使用 flex 方向：

在lg 和更大的地方使用弹性框列。 row 容器必须具有定义的高度。在这种情况下，我使用了 h-100 (height: 100%;)。

<div class="container vh-100">
   <div class="row h-100 flex-lg-column flex-wrap">
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
      <div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
   </div>
</div>

https://www.codeply.com/go/WDjcxLu5bC

---

使用 flexbox 和浮动：

此选项在lg 和更大的屏幕上使用浮动，并在较小的屏幕上返回到 flexbox，这允许我们在布局垂直堆叠时更改列的顺序。此布局也仅限于height:100%。

<div class="row d-lg-block vh-100">
    <div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
        <div class="flex-grow-1 px-3 border">1</div>
        <div class="flex-grow-1 px-3 border">2</div>
    </div>
    <div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
    <div class="col-lg-3 float-left border h-50">4</div>
    <div class="col-lg-3 float-left border h-50">5</div>
</div>

https://www.codeply.com/go/eXY3HFr5A4