交换两个div位置的响应式设计

//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;
}

在重新排列元素的同时，仍然允许它们占据空间，这与绝对定位方法不同。

这种方法适用于所有现代浏览器和IE9+

标签：group,header,交换,响应,重新排列,table,div,div3,display
来源： https://www.cnblogs.com/wh20xy/p/14021331.html