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

我想像这张图片一样更改移动版 block 的顺序:

Answer 1

这里有 2 个选项...

响应式地使用 flex 方向:

在 lg 和更大的尺寸上使用 flexbox 列。 行容器必须有定义的高度。在本例中，我使用了 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 和 float :

此选项在 lg 和更大的屏幕上使用 float ，并在较小的屏幕上返回到 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