自适应flexbox不适用于三列

Question

目前我在flexbox中有三列（Plunkr目前的情况）。

当屏幕变小时，我希望第二列位于另外两列之上（Plunkr中的所需情况）。

我在https://plnkr.co/edit/ZznzRKHvhdISykHP7jNh

创建了一个Plunkr

是否可以通过纯粹修改css来获得所需的情况？

CSS

  .row {
    display: flex;
  }
  .item {
    display: flex;
    flex: 1;
    height: 300px;
  }
  .item1 {
    flex: 1;
    background: orange;
  }
  .item2 {
    flex: 2;
    background: red;
  }
  .item3 {
    flex: 1;
    background: yellow;
  }

HTML   

<p>Current situation</p>
<div class="row">
  <div class="item item1">Foobar1</div>
  <div class="item item2">Foobar2</div>
  <div class="item item3">Foobar3</div>
</div>

<br>

<p>Desired situation with pure css</p>
<div class="row">
  <div class="item item2">Foobar2</div>
</div>
<div class="row">
  <div class="item item1">Foobar1</div>
  <div class="item item3">Foobar3</div>
</div>

Answer 1

简单的flex-wrap和媒体查询中order的更改，以便按行顺序将第二个框放在第一位。

Jsfiddle Demo

.row {
   display: flex;
   height: 300px;
   flex-wrap: wrap;
 }
 .item {
   order: 2;
   flex: 1;
 }
 .item1 {
   background: orange;
 }
 .item2 {
   background: red;
   flex:2;
 }
 .item3 {
   background: yellow;
 }
 @media(max-width: 500px) {
   .item2 {
     flex: 100%;
     order: 1;
   }
 }

<div class="row">
  <div class="item item1">Foobar1</div>
  <div class="item item2">Foobar2</div>
  <div class="item item3">Foobar3</div>
</div>