css - 自适应 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>