使用CSS重新排序多个div

Question

给定一个模板,由于其他要求无法修改HTML,如果在HTML中不按顺序显示(重新排列)另一个div之上的div,该怎么可能？两个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>

其他元素希望很明显,期望的结果是:

在这种情况下要满足的内容在这种情况下的内容其他元素当维度被修复时,很容易将它们放置在需要的位置,但是我需要一些关于内容变化的想法.为了这种情况,请仅考虑两者的宽度为100%.

编辑:CSS解决方案是最理想的解决方案.感谢您提到的Javascript选项.不要过于专注于什么或为什么(或谁)...我特意寻找一个仅限CSS的解决方案(如果不能解决,可能必须满足其他解决方案).

还有一个......在此之后还有其他元素.鉴于我所展示的有限场景,我们提到了一个很好的建议 - 假设它可能是最好的答案,但我也希望确保后面的元素不会受到影响.

Answer 1

使用CSS3 flexbox布局模块,您可以使用order或flex-direction: column-reverse.如果您希望以相反的顺序(首先是底部元素,最后一个元素)重新排列元素并且避免使用顺序值,后者会更好.由于您不希望其他元素受到影响,请使用订单解决方案.

值得一提的是:

order 只更改绘制顺序而不是DOM顺序.

flex-direction 不影响绘画顺序,只影响流动方向.

#wrapper {
  display: flex;
  flex-direction: column;
}
#secondDiv {
  order: -1; /* Negative order because default value is 0 */
}

<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 id="thirdDiv">
    Third div unaffected
  </div>
  <div id="fourthDiv">
    Fourth div unaffected
  </div>
</div>

#wrapper {
  display: flex;
  flex-direction: column-reverse;
}

<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>