这个问题已经有了很好的答案,但是本着探索所有可能性的精神,这里是另一种重新排序 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