仅与CSS交换DIV位置
我正在尝试将两个div的位置换成响应式设计(根据浏览器的宽度，网站看起来会有所不同/适合移动设备)。
现在我有这样的东西：
<div id="first_div"></div>
<div id="second_div"></div>但是，有没有可能交换他们的位置，让它看起来像second_div是第一个，只使用CSS？HTML保持不变。我尝试过使用浮点数之类的东西，但它似乎并不像我想要的那样工作。我不想使用绝对定位，因为divs的高度总是在变化。有没有什么解决方案，或者根本没有办法做到这一点？
回答 9
Stack Overflow用户
发布于 2013-07-04 04:15:39
有人给我链接了：What is the best way to move an element that's on the top to the bottom in Responsive design。
其中的解决方案工作得很完美。虽然它不支持旧的IE，但这对我来说并不重要，因为我使用的是针对移动设备的响应式设计。而且它适用于大多数移动浏览器。
基本上，我有这样的想法：
@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，我必须交换它们的位置。
Stack Overflow用户
发布于 2016-06-11 02:48:03
公认的答案适用于大多数浏览器，但由于某些原因，在iOS、Chrome和Safari浏览器上，应该显示second的内容被隐藏了。我尝试了一些其他步骤，强制内容堆叠在一起，最终我尝试了以下解决方案，获得了预期的效果(切换移动屏幕上的内容显示顺序)，没有堆叠或隐藏内容的bug：
.container {
display:flex;
flex-direction: column-reverse;
}
.section1,
.section2 {
height: auto;
}Stack Overflow用户
发布于 2015-10-27 09:53:28
这个问题已经有了一个很好的答案，但本着探索所有可能性的精神，这里有另一种技术来重新排序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位于底部。当然，table-row-group会将一个元素放在中间。
这种方法速度快，支持良好，并且比flexbox方法需要的css少得多，所以如果你只是想用几个项目来换取移动布局，那么就不要排除这个技术。
您可以在codepen上查看现场演示：http://codepen.io/thepixelninja/pen/eZVgLx
https://stackoverflow.com/questions/17455811
复制相似问题