不同的行 > 按屏幕大小排列的 col 配置（引导程序）

Question

我想有两个不同的行> cols 配置取决于屏幕大小。 例如，我实际上为 md 屏幕得到了这个：

<div class="row align-items-md-center">
  <div class="col-6">1</div>
  <div class="col-2">2</div>
  <div class="col-2">3</div>
  <div class="col-2">4</div>
</div>

对于移动设备，我想：

<div class="row align-items-md-center">
  <div class="col-6">1</div>
  <div class="col-2">4</div>
  <div class="col-2">2</div>
  <div class="col-2">3</div>
</div>

有人已经遇到这个问题了吗？

谢谢

Answer 1

可以使用用于 flex 布局的 order 属性来完成。

这里看看这个，这里我为列添加了类，并根据要求更改了.div-3和div-2的顺序。 默认情况下，所有弹性项目的顺序为 0，因此我在媒体查询中将这些 div 的顺序更改为 1，这样顺序为 1 的 div 将排在顺序为 0 的 div 之后。

 .row { display: flex; } @media only screen and (max-width: 480px) {.div-2, .div-3 { order: 1; } }

 <div class="row align-items-md-center"> <div class="col-6 div-1">1</div> <div class="col-2 div-2">2</div> <div class="col-2 div-3">3</div> <div class="col-2 div-4">4</div> </div>

Answer 2

您也可以这样做，无需任何额外的类：

 .row { display: flex; } @media only screen and (max-width: 599px) {.row > div:nth-child(2), .row > div:nth-child(3) { order: 1; } }

 <div class="row align-items-md-center"> <div class="col-6">1</div> <div class="col-2">2</div> <div class="col-2">3</div> <div class="col-2">4</div> </div>