不同的行 > 按屏幕大小排列的 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>