交换两个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+