我如何重新排序我的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());});