css交换技术,仅使用CSS交换DIV位置

小编典典

有人联系我：什么是移动这是在顶部以自适应设计下一个元素的最佳途径。

该解决方案完美地工作了。尽管它不支持旧版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位置上互换。

2020-05-16