如何仅使用css切换2个div的顺序？
如何仅使用css切换2个div的顺序？
提问于 2018-10-07 21:48:08
我想知道如何仅使用css (或js)为移动用户更改这两个div的顺序(PHP不是一个选项，因为我使用的是全页面缓存)。这应该只发生在可变产品上(我认为下面的div对变体产品有一个不同的类名，所以我认为这不是问题)
这是页面：https://bonmedico.net/products/bandages-orthoses/stato/
这是一个屏幕截图，显示了我需要切换位置的两个div：https://ibb.co/mMdYw9
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-07 22:10:42
使用flexbox，您可以在包装器div中更改div的顺序。
使用@media查询，您可以根据屏幕大小执行此操作。
我做了一个简单的代码示例。你应该能够适应它。
.wrapper {
display: flex;
flex-direction: column;
}
/* For Mobile - change the max-width to whatever you want */
@media screen and (max-width: 540px) {
.wrapper>#firstDiv {
order: 2;
}
.wrapper>#secondDiv {
order: 1;
}
}
/* For other and change the min-width here as well. */
@media screen and (min-width: 540px) {
.wrapper>#firstDiv {
order: 1;
}
.wrapper>#secondDiv {
order: 2;
}
}<div class="wrapper">
<div id="firstDiv">
This is usually first
</div>
<div id="secondDiv">
This is usually second
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52689120
复制相关文章
相似问题