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个选项...

响应式地使用弯曲方向：

使用lg及更高版本上的flexbox列。 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

---

带有弹性框和浮动控件的：

此选项使用lg及更大的浮动字体，并在较小的屏幕上返回flexbox，这使我们可以在布局垂直堆叠时更改cols的顺序。此布局也仅限于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