在CSS中，将第一个div向左或向右浮动。第二个div与第一个div一样向左或向右浮动。应用clear:向左或向右，与上面两个div的第二个div相同。

例如:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

仅css的解决方案(适用于IE10+) -使用Flexbox的order属性:

演示:http://jsfiddle.net/hqya7q6o/596/

#flex{显示:flex;flex-direction:列;｝ #a {order: 2;｝ #b {order: 1;｝ #c {order: 3;｝ flex < div id = " " > < div id = " " > < / div > b < div id = " b " > < / div > c < div id = " c " > < / div > < / div >

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

负的顶部边距可以达到这种效果，但是需要为每一页定制。例如，这个标记…

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

.．.这个CSS…

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

…你可以把第二段放在第一段上面。

当然，您必须手动调整CSS以适应不同的描述长度，以便介绍段跳跃适当的数量，但如果您对其他部分的控制有限，而对标记和CSS有完全的控制，那么这可能是一个选择。

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

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

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

你可以使用Flex

#包装{ 显示:flex; flex-direction:列; ｝ # firstDiv { 顺序:1; ｝ # secondDiv { 秩序:0; ｝ < div id = "包装" > < div id = " firstDiv " > 在这种情况下，内容在下面 < / div > < div id = " secondDiv " > 在这种情况下满足于上面 < / div > < / div >

或者为元素设置一个绝对位置，并通过从页面的边缘而不是对象的边缘声明页边距来去除页边距。使用%，因为它更适合其他屏幕尺寸等。这就是我如何克服这个问题的……谢谢，希望这是你想要的…