css - 从 3 列的行创建一个 2 列响应断点

Question

我有两行，每行包含树列。在响应断点上，我想切换到两列的树线。

由于初始结构，这似乎不可能(我只能制作 1 列行，或树列行，不能制作两列行)。

请不要使用 JS...

这通常是如何解决的？ DEMO HERE

CSS

.col {
  float: left;
  width: 33.33%;
  background: red;
  text-align: center;
}

@media (max-width:500px) {
  .col {
    width: 50%;
  }
}

HTML

<div class="row" style="overflow:auto;">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

<div class="row" style="overflow:auto;">
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

Answer 1

试试这段代码

.contain {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 33%;
}

@media (max-width:500px) {
  .col {
    min-width: 50%;
  }
}

<div class="contain">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>