html - 收缩时 flex 元素的位置高于其他 flex 元素

Question

看看这个例子。如果您缩小屏幕，您会看到绿色框位于红色框下方。
问题:
是否有可能绿色框出现在红色框上方？如果屏幕尺寸太小，我希望绿色框位于右侧，然后出现在顶部

.box {
   display: flex;
   flex-flow: wrap;
}

.a {
  background: red;
  height: 850px;
  width: 250px;
}

.b {
  background: green;
  height: 250px;
  width: 250px;
}

<div class="box">
<div class="a"></div>
<div class="b"></div>
</div>

我用 wrap-reverse 试过了但是该 block 出现在开始时的底部
我也对其他解决方案持开放态度，可能使用更新的技术，如 grid

Answer 1

是的，您可以通过 order: [numeric value] 实现此目的.
如果您将媒体查询添加到它应该发生的位置(在此示例屏幕视口(viewport)低于 640px ，HTML 顺序可以保持不变。您只需添加顺序作为层次结构元素。.b 将首先显示，因为更高的排名。阅读更多关于 order at MDN 的信息。

@media only screen and (max-width: 640px) {
  .a {
    order: 2;
  }
  .b {
    order: 1;
  }
}

编辑
随着 .box 上的 CSS 更改这是可能的。添加 flex-flow: column wrap到媒体查询，它将起作用。然后它将进行垂直对齐(列)。

.box {
    display: flex;
    flex-flow: column wrap;
}

.box {
  display: flex;
  flex-flow: wrap;
}

.a {
  background: red;
  height: 850px;
  width: 250px;
}

.b {
  background: green;
  height: 250px;
  width: 250px;
}

@media only screen and (max-width: 640px) {
  .box {
    display: flex;
    flex-flow: column wrap;
  }
  .a {
    order: 2;
  }
  .b {
    order: 1;
  }
}

<div class="box">
  <div class="a"></div>
  <div class="b"></div>
</div>