根据屏幕大小不同的行>列配置(引导)

Question

我希望有两种不同的行>协议配置取决于屏幕大小。举个例子，我在md screen上得到了这个：

<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 layouts的order property works完成。

在这里，我为列添加了类，并根据需要更改了.div-3和div-2的顺序。默认情况下，所有flex-item的顺序都为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>

​