正如其他人所说，这不是你想在CSS中做的事情。你可以用绝对的定位和奇怪的边际来蒙混过关，但这不是一个可靠的解决方案。在您的情况下，最好的选择是转向javascript。在jQuery中，这是一个非常简单的任务:

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

或者更一般地说:

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

这里有一个解决方案:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

但我怀疑您有一些内容遵循包装器div…

如果您知道，或者可以强制将成为upper元素的大小，则可以使用

position : absolute;

在你的css中，给divs他们的位置。

否则javascript似乎是唯一的出路:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

或者类似的东西。

编辑:我刚刚发现这可能是有用的:w3文档css3移动到

在支持pre-flexbox用户代理(主要是旧IE)的同时，绝对没有办法通过CSS来实现你想要的东西——除非:

您知道每个元素的精确渲染高度(如果是这样，您可以完全定位内容)。如果您正在处理动态生成的内容，那么您就不走运了。 你知道这些元素的确切数量。同样，如果您需要对动态生成的多个内容块执行此操作，那么您就不走运了，特别是当内容块超过三个左右时。

如果以上为真，那么您可以通过对元素的绝对定位来做您想做的事情

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

同样，如果你不知道至少#firstDiv的高度，你无法通过CSS单独做你想做的事情。如果这些内容是动态的，则必须使用javascript。

如果您想反转子元素的显示顺序。我建议你用这个

方向:rtl;//从右向左

在父元素中设置此属性

CSS真的不应该被用来重构HTML后端。然而，如果你知道所涉及的两个元素的高度，并且感觉很笨拙，这是可能的。此外，当在div之间进行时，文本选择将会混乱，但这是因为HTML和CSS的顺序是相反的。

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

其中XXX和YYY分别是firstDiv和secondDiv的高度。这将适用于后面的元素，不像顶部的答案。