html - 如何仅使用 CSS 重新排序我的 div？

Question

给定一个模板，其中 HTML 由于其他要求而无法修改，当一个 div 不在时，如何在另一个 div 之上显示(重新排列)它们HTML 中的那个顺序？两个 div 都包含高度和宽度不同的数据。

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望期望的结果是显而易见的:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸固定时，很容易将它们放置在需要的地方，但我需要一些关于内容可变的想法。对于这种情况，请只考虑两者的宽度均为 100%。

我正在专门寻找一个纯 CSS 的解决方案(如果没有成功，它可能必须与其他解决方案一起使用)。

此后还有其他元素。考虑到我展示的有限场景，有人提到了一个很好的建议——假设它可能是最好的答案，但我也希望确保后面的元素不会受到影响。

Answer 1

纯 CSS 解决方案(适用于 all modern browsers )——使用 Flexbox 的 order 属性:

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">2nd</div>
   <div id="b">1st</div>
   <div id="c">3rd</div>
</div>

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/order