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

【问题标题】：Different row > col disposition by screen size (bootstrap)不同的行 > 按屏幕大小排列的 col 配置（引导程序）
【发布时间】：2020-12-08 01:01:26
【问题描述】：

我想要两个不同的行 > 列的配置取决于屏幕大小。例如，我实际上得到了这个用于 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>

有人遇到过这个问题吗？

谢谢

【问题讨论】：

您可以使用display: flex 和order 属性来实现此目的

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：