给定一个模板，HTML不能修改，因为其他要求，如何可能显示(重新安排)一个div上面的另一个div时，他们不是在HTML的顺序?两个div都包含高度和宽度不同的数据。
<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 situation
Content to be below in this situation
Other elements
当尺寸是固定的，很容易定位他们在需要的地方，但我需要一些想法，当内容是可变的。为了实现这个场景，请将两者的宽度都考虑为100%。
我特别寻找一个css唯一的解决方案(它可能必须满足其他解决方案，如果它不成功)。
接下来还有其他因素。考虑到我演示的有限场景，我提到了一个很好的建议——考虑到它可能是最好的答案，但我也希望确保后面的元素不受影响。
仅为移动设备订购，并保持桌面本机顺序:
/ / html
<div>
<div class="gridInverseMobile1">First</div>
<div class="gridInverseMobile1">Second</div>
</div>
/ / css
@media only screen and (max-width: 960px) {
.gridInverseMobile1 {
order: 2;
-webkit-order: 2;
}
.gridInverseMobile2 {
order: 1;
-webkit-order: 1;
}
}
结果:
Desktop: First | Second
Mobile: Second | First
来源:https://www.w3schools.com/cssref/css3_pr_order.asp
仅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
这只能用CSS来完成!
请检查我对这个类似问题的回答:
https://stackoverflow.com/a/25462829/1077230
我不想重复我的答案，但它的简短是，父元素需要成为一个flexbox元素。例如:
(此处仅使用webkit供应商前缀)
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
然后，通过指示它们的顺序来交换div:
#main > div#one{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
overflow:visible;
}
#main > div#two{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
在支持pre-flexbox用户代理(主要是旧IE)的同时，绝对没有办法通过CSS来实现你想要的东西——除非:
您知道每个元素的精确渲染高度(如果是这样，您可以完全定位内容)。如果您正在处理动态生成的内容，那么您就不走运了。
你知道这些元素的确切数量。同样，如果您需要对动态生成的多个内容块执行此操作，那么您就不走运了，特别是当内容块超过三个左右时。
如果以上为真，那么您可以通过对元素的绝对定位来做您想做的事情
#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }
同样，如果你不知道至少#firstDiv的高度，你无法通过CSS单独做你想做的事情。如果这些内容是动态的，则必须使用javascript。
