我如何重新排序我的div与CSS？

Question

我如何重新排序我的div与CSS？给定由于其他需求而无法修改HTML的模板，如何才能显示(重新排列)一个div高于另一div当它们不在HTML中按这个顺序排列时？双管齐下divS包含高度和宽度不同的数据。<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 situationContent to be below in this situationOther elements当尺寸固定时，很容易将它们定位到需要的地方，但我需要一些关于内容是可变的想法。为了这个场景，请考虑两种情况下的宽度都是100%。我特别想要一个CSS唯一的解决方案(如果不能解决这个问题的话，它可能会遇到其他的解决方案)。后面还有其他元素。考虑到我演示的有限的场景，我提到了一个很好的建议-考虑到这可能是最好的答案，但我也希望确保后面的元素不会受到影响。

Answer 1

这，这个解只使用css并处理可变内容。

#wrapper   { display: table; }#firstDiv  { display: table-footer-group; }#secondDiv { display: table-header-group; }

Answer 2

正如其他人所说的，这不是你想要在CSS中做的事情。你可以用绝对的定位和奇怪的边距来修饰它，但这不是一个强有力的解决方案。在您的情况下，最好的选择是转到javascript。在jQuery中，这是一个非常简单的任务：

$('#secondDiv').insertBefore('#firstDiv');

或者更笼统地说：

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());});