从 3 列的行创建 2 列响应断点答案

【问题标题】：Make a 2 column responsive breakpoint from rows of 3 columns从 3 列的行创建 2 列响应断点
【发布时间】：2019-03-10 14:51:33
【问题描述】：

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

由于初始结构，这似乎不可能（我只能制作 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>

【问题讨论】：

看看Bootstrap中的push和pull

标签： css responsive-design

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

【讨论】：