只用CSS交换DIV位置
我试图交换两个div的位置进行响应式devise（网站看起来不同，取决于浏览器的宽度/移动性好）。
现在我有这样的东西：
<div id="first_div"></div> <div id="second_div"></div>
但是有可能交换他们的位置，使它看起来像second_div是第一个，只使用CSS？ HTML保持不变。 我试过使用浮动和东西，但它似乎并没有按照我想要的方式工作。 我不想使用绝对定位，因为div的高度总是在变化。 有没有解决办法，还是没有办法做到这一点？
有人与我联系： 在响应式devise中，将顶部的元素移动到底部的最佳方法是什么？
在这个解决scheme完美。 虽然它不支持旧的IE浏览器，这对我来说并不重要，因为我正在使用移动设备的响应式devise。 它适用于大多数移动浏览器。
基本上，我有这样的：
@media (max-width: 30em) { .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .container .first_div { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .container .second_div { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } }
这对我来说比花车更好，因为我需要他们堆叠在一起，我有大约五个不同的div，我不得不交换位置。
这个问题已经有了一个很好的答案，但是本着探索所有可能性的精神，这里是另一种重新排列dom元素的技巧，同时也允许他们占据自己的空间，而不像绝对定位方法。
这种方法适用于所有现代浏览器和IE9 +（基本上任何支持display：table的浏览器），但它有一个缺点，即只能在最多3个兄弟上使用。
//the html <div class='container'> <div class='div1'>1</div> <div class='div2'>2</div> <div class='div3'>3</div> </div> //the css .container { display:table; } .div1 { display:table-footer-group; } .div2 { display:table-header-group; } .div3 { display:table-row-group; }
这将重新排列元素从1,2,3到2,3,1。 基本上，显示设置为table-header-group的任何东西都将位于顶部，而底部则是table-footer-group。 自然地，表行组将元素放在中间。
这种方法很快就得到了很好的支持，并且比flexbox方法所需的css要less得多，所以如果你只是想为一个移动布局交换几个项目，那么就不要排除这个技术。
你可以看看codepen上的现场演示： http ://codepen.io/thepixelninja/pen/eZVgLx
接受的答案适用于大多数浏览器，但由于某些原因，在iOS Chrome和Safari浏览器中，本应该显示的内容被隐藏起来。 我尝试了一些强制内容堆叠在一起的其他步骤，最后我尝试了下面的解决scheme，它给了我预期的效果（在手机屏幕上切换内容显示顺序），没有堆叠或隐藏内容的错误：
.container { display:flex; flex-direction: column-reverse; } .section1, .section2 { height: auto; }
假设没有跟随他们
如果这两个div元素基本上是你的主要布局元素，并没有什么跟随他们在html中，那么有一个纯粹的HMTL / CSS的解决scheme， 这个小提琴显示的正常顺序，并能够垂直翻转它，如这个小提琴使用一个额外的包装div像这样：
HTML
<div class="wrapper flipit"> <div id="first_div">first div</div> <div id="second_div">second div</div> </div>
CSS
.flipit { position: relative; } .flipit #first_div { position: absolute; top: 100%; width: 100%; }
如果元素跟随这些div的话，这将不起作用，因为如果下面的元素没有被包装 （它们被#first_div重叠）， 这个小提琴就演示了这个问题，如果下面的元素也被包装了 （ #first_div改变位置与#second_div 和以下元素 ）。 所以这就是为什么，这取决于你的使用情况，这种方法可能会或可能不会工作。
对于整体布局scheme，其中所有其他元素存在于两个div的内部，它可以工作。 对于其他情况，它不会。
仅使用CSS：
#blockContainer { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #blockA { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } #blockB { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3;
}
<div id="blockContainer"> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> </div>
由于我有多个元素，我想要切换已经发布的答案，这两个元素后，我没有工作。 下面虽然工作：
HTML
<div class="wrapper"> <div id="first_div">first div</div> <div id="second_div">second div</div> </div>
CSS
.flipit { position: relative; } .flipit #first_div { position: relative; top: 100px; } .flipit #second_div { position: relative; bottom: 100px; }
