从3列行生成2列响应断点

Question

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

由于初始结构，这似乎是不可能的(我只能创建一个colum行，或者树列行，bot，而不是两个列行)。

不要JS拜托..。

这通常是如何解决的？这里的演示

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>

​