【CSS教程】如何使用CSS让2个DIV 互换上下位置

该解决方案完美地工作了。尽管它不支持旧版IE，但这对我来说并不重要，因为我在移动设备上使用了响应式设计。它适用于大多数移动浏览器。

加入下面CSS即可

@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位置上互换。