Make a 2 column responsive breakpoint from rows of 3 columns

问题

I have two rows containing tree columns each. On a Responsive breakpoint, I'd like to switch to tree lines of two columns.

Due to the initial structure, this does not seem possible (I can only make 1 colum rows, or tree column rows, bot not two column rows).

No JS please...

How is this usually solved? 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>

回答1:

Try this code

.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>

来源：https://stackoverflow.com/questions/37084471/make-a-2-column-responsive-breakpoint-from-rows-of-3-columns