Html 是否可以使用CSS更改flex项的嵌套结构（取决于@media）？

我有一个两列布局，左边是一个侧边栏，右边是一个地图。侧边栏有两个框；一个用于搜索输入，一个用于结果列表。所以在桌面上，它看起来像这样：

+--------------+---------------------+
| search input |                     |
+--------------+           map       |
|  results     |                     |
|   ...        |                     |
+--------------+---------------------+

在移动设备上，我希望所有内容都显示在一列中，但搜索输入和结果之间有映射，因此这更多的是一种结构变化，而不是简单的弹性方向/顺序变化：

+------------------------------------+
|          search input              |
+------------------------------------+
|                                    |
|               map                  |
|                                    |
+------------------------------------+
|           results                  |
|             ...                    |
+------------------------------------+

---

这可能吗？

在不使用

JavaScript的情况下重新排序的条件是所有项目都是同级的：

<div class="wrap">
  <div            > 1. sidebar </div>
  <div class="map"> 2. map </div>
  <div            > 3. also sidebar </div>
  <div            > 4. still sidebar </div>
</div>


1.边栏
2.地图
3.还有侧边栏
4.静止侧边栏
在不使用
JavaScript的情况下重新排序的条件是所有项目都是同级：

<div class="wrap">
  <div            > 1. sidebar </div>
  <div class="map"> 2. map </div>
  <div            > 3. also sidebar </div>
  <div            > 4. still sidebar </div>
</div>


1.边栏
2.地图
3.还有侧边栏
4.静止侧边栏
可能重复：使用纯CSS…直到
display:contents
得到更广泛的支持。我相信这只是Firefox。如果你不能在容器上设置一个固定的高度，这个答案可能是一个选项？：如果搜索输入、地图和结果容器是同级的，您只需使用flexbox布局模型中的
order
属性对其重新排序即可。可能的重复：使用纯CSS…直到
display:contents
得到更广泛的支持。ATM我相信这只是Firefox。如果你不能在容器上设置一个固定的高度，这个答案可能是一个选项？：如果搜索输入、映射和结果容器是兄弟容器，你可以简单地使用flexbox布局模型中的
order
属性对它们重新排序。