我想知道如何仅使用css (或js)为移动用户更改这两个div的顺序(PHP不是一个选项,因为我使用的是全页面缓存)。这应该只发生在可变产品上(我认为下面的div对变体产品有一个不同的类名,所以我认为这不是问题)
这是页面:https://bonmedico.net/products/bandages-orthoses/stato/
这是一个屏幕截图,显示了我需要切换位置的两个div:https://ibb.co/mMdYw9
发布于 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>
https://stackoverflow.com/questions/52689120
复制相似问题