如果某个模板由于其他要求而无法修改HTML，那么当它们在HTML中的顺序不同时，如何在另一个div上显示（重新排列）div？两个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的解决方案（如果不能解决，可能必须满足其他解决方案）。
此后还有其他要素。鉴于我所展示的有限情景，我们提到了一个很好的建议 - 鉴于它可能是最好的答案，但我也希望确保后面的元素不会受到影响。
答案 0 :(得分：262)
此solution仅使用CSS并使用可变内容
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
答案 1 :(得分：177)
仅限CSS的解决方案（适用于IE10+） - 使用Flexbox的order属性：
演示：http://jsfiddle.net/hqya7q6o/596/
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
答案 2 :(得分：77)
正如其他人所说，这不是你想要在CSS中做的事情。你可以用绝对定位和奇怪的边距来捏造它，但它不是一个强大的解决方案。在您的情况下，最好的选择是转向JavaScript。在jQuery中，这是一个非常简单的任务：
$('#secondDiv').insertBefore('#firstDiv');
或更一般地说：
$('.swapMe').each(function(i, el) {
$(el).insertBefore($(el).prev());
});
答案 3 :(得分：33)
这可以使用Flexbox完成。
创建一个同时应用 display：flex 和 flex-flow：column-reverse 的容器。
/* -- Where the Magic Happens -- */
.container {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
/* -- Styling Only -- */
.container > div {
background: red;
color: white;
padding: 10px;
}
.container > div:last-of-type {
background: blue;
}<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
来源：
答案 4 :(得分：26)
在支持pre-flexbox用户代理（mostly old IE） - 除非：
之前，绝对无法通过CSS实现您的目标如果以上情况属实，那么你可以通过绝对定位元素来做你想做的事 -
#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }
同样，如果你不知道至少#firstDiv的高度，你无法通过CSS单独做你想做的事。如果这些内容中的任何内容是动态的，您将必须使用javascript。
答案 5 :(得分：16)
这是一个解决方案：
<style>
#firstDiv {
position:absolute; top:100%;
}
#wrapper {
position:relative;
}
但我怀疑你有一些内容跟在包装器div ...
之后答案 6 :(得分：7)
使用CSS3 flexbox布局模块，您可以订购div。
#wrapper {
display: flex;
flex-direction: column;
}
#firstDiv {
order: 2;
}
<div id="wrapper">
<div id="firstDiv">
Content1
</div>
<div id="secondDiv">
Content2
</div>
</div>
答案 7 :(得分：5)
如果你知道，或者可以强制执行to-be-upper元素的大小，你可以使用
position : absolute;
在你的CSS中给divs他们的位置。
否则javascript似乎是唯一的出路：
fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );
或类似的东西。
编辑：我刚发现这可能有用：w3 document css3 move-to
答案 8 :(得分：5)
负顶边距可以达到此效果，但需要为每个页面自定义。例如，这个标记...
<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，则可能是一个选择。
答案 9 :(得分：4)
嗯，通过一些绝对定位和一些狡猾的保证金设置，我可以接近，但它并不完美或漂亮：
#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }
“margin-top：4em”是特别讨厌的位：需要根据firstDiv中的内容量调整此边距。根据您的具体要求，这可能是可能的，但我希望无论如何有人可能能够在此基础上建立可靠的解决方案。
应该追求Eric关于javascript的评论。
答案 10 :(得分：3)
仅针对移动设备订购并保留台式机的本机订单：
// 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
答案 11 :(得分：3)
这只能用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;
}
答案 12 :(得分：3)
你只需要这个！ 在css中，向左或向右浮动第一个div。 向左或向右浮动第二个div与第一个相同。 清除左或右与上面两个div相同的第二个div。 例如：
#firstDiv {
float: left;
}
#secondDiv {
float: left;
clear: left;
}
让我的朋友好玩。
答案 13 :(得分：2)
我一直在寻找一种方法来改变div的顺序仅适用于移动版本，所以我可以很好地设计它。感谢nickf的回复，我得制作一段适用于我想要的代码，所以我想和你们分享：
// changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
if ( jQuery(window).width() < 480 )
{
jQuery('#main-content').insertBefore('#sidebar');
}
if ( jQuery(window).width() > 480 )
{
jQuery('#sidebar').insertBefore('#main-content');
}
jQuery(window).height(); // New height
jQuery(window).width(); // New width
});
答案 14 :(得分：2)
具有更大浏览器支持的解决方案然后是flexbox（在IE≥9下工作）：
#wrapper {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
#wrapper > * {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}<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
与display: table;解决方案相比，此解决方案在.wrapper有任意数量的子项时有效。
答案 15 :(得分：0)
通过指定display: flex和flex-direction : column，只需对父div使用flex。
然后使用order来确定哪个子div首先出现
答案 16 :(得分：0)
如果仅使用CSS，则可以使用flex。
.price {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse; //revert horizontally
//flex-direction: column-reverse; revert vertically
}<div class="price">
<div>first block</div>
<div>second block</div>
</div>
答案 17 :(得分：-1)
我有一个更好的代码，由我制作，它是如此之大，只是为了展示两件事......创建一个4x4表并垂直对齐多于一个单元格。
它不使用任何IE hack，没有vertical-align：middle;在所有......
它不用于垂直居中显示表，显示：table-rom;显示：表细胞;
它使用具有两个div的容器的技巧，一个隐藏（位置不正确但使父级具有正确的可变大小），一个隐藏在隐藏之后但顶部可见：-50％;所以纠正位置是一个推动者。
请参阅制作技巧的div类： BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible
请抱歉在课程名称上使用西班牙语（这是因为我讲西班牙语，这是非常棘手的，如果我使用英语我会迷路）。
完整代码：
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div.BloqueTipoTabla{
display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoFila_AltoAjustadoAlContenido{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoFila_AltoRestante{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoCelda_AjustadoAlContenido{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
}
div.BloqueTipoCelda_RestanteAncho{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoCelda_RestanteAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
}
div.BloqueTipoCelda_RestanteAnchoAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoContenedor{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
}
div.BloqueTipoContenedor_VerticalmenteCentrado{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
}
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[1,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,4]
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[2,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,4]
</div>
</div>
<div class="BloqueTipoFila_AltoRestante">
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is<br />cell [3,2]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is<br />cell [3,2]
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAnchoAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This other is<br />the cell [3,4]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This other is<br />the cell [3,4]
</div>
</div>
</div>
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[4,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,4]
</div>
</div>
</div>
</body>
</html>
答案 18 :(得分：-1)
晚会很晚，但你也可以这样做：
<div style="height: 500px; width: 500px;">
<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>
<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>
答案 19 :(得分：-1)
CSS实际上不应该用于重构HTML后端。但是，如果您知道所涉及的两个元素的高度并且感觉到hackish是可能的。此外，文本选择将在div之间进行混乱，但这是因为HTML和CSS顺序相反。
#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }
其中XXX和YYY分别是firstDiv和secondDiv的高度。与顶部答案不同，这将与尾随元素一起使用。
答案 20 :(得分：-2)
或者为元素设置绝对位置，并通过从页面边缘而不是对象边缘声明它们来处理边距。使用％作为更适合其他屏幕尺寸等。这就是我克服这个问题的方式......谢谢，希望它能满足您的需求......
答案 21 :(得分：-3)
.move-wrap {
display: table;
table-layout: fixed; // prevent some responsive bugs
width: 100%; // set a width if u like
/* TODO: js-fallback IE7 if u like ms */
}
.move-down {
display: table-footer-group;
}
.move-up {
display: table-header-group;
}
答案 22 :(得分：-3)
仅适用于CSS解决方案 1.包装纸的高度应固定或 2.第二个div的高度应该是固定的
答案 23 :(得分：-4)
使用css很容易，只需使用display:block和z-index属性
以下是一个例子：
<强> HTML：
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</body>
<强> CSS：
.wrapper
{
[...]
}
.header
{
[...]
z-index:9001;
display:block;
[...]
}
.content
{
[...]
z-index:9000;
[...]
}
修改：最好将background-color设置为div-s，以便正确查看内容。
答案 24 :(得分：-4)
我有一个简单的方法可以做到这一点。
<!-- 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;}
}