一个比flexbox更大的浏览器支持的解决方案(适用于IE≥9):

#包装{ -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ #包装> * { -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ < div id = "包装" > < div id = " firstDiv " > 在这种情况下，内容在下面 < / div > < div id = " secondDiv " > 在这种情况下满足于上面 < / div > < / div > 其他元素

对比显示:表;解决方案当.wrapper有任意数量的子节点时，此解决方案有效。

这里有一个解决方案:

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

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

CSS唯一解决方案 1. 包装的高度应固定或 2. 第二个div的高度应该固定

我有一个简单的方法。

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}

如果你只使用css，你可以使用flex。

.price { 显示:flex; 对齐项目:中心; justify-content:中心; flex-direction: row-reverse;/ /恢复水平 / / flex-direction: column-reverse;恢复垂直 ｝ < div class = "价格" > < div >第一块< / div > 第二块< div > < / div > < / div >

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

<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有完全的控制，那么这可能是一个选择。