Flexbox混合弯曲方向没有容器

Question

移动设备上的flexbox有问题。

桌面上有三个框flex-direction: row：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

在手机上我想在左栏中显示box1和box3，在右侧显示box2。

如果不添加容器，我该怎么办？

Answer 1

这是一个可能的解决方案。不幸的是，您必须将max-height与父容器一起使用。

body {
  display: flex;
}

div {
  background: yellow;
  height: 120px;
  margin: 5px;
  width: 120px;
}

@media (max-width: 500px) {
  body {
    align-content: flex-start;
    flex-flow: column wrap;
    max-height: 300px;
  }
  .box2 {
    order: 3;
    height: 250px;
  }
}

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>