我正在尝试更改新的 Opencart 2.0 模板中的 div 顺序,以便在使用较小的屏幕时添加到购物车按钮显示在产品描述上方。
这是我试过的,但似乎不起作用
CSS:
@media screen and (max-width:767px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:1;}
#b{order:3;}
#c{order:4;}
#d{order:5;}
#e{order:2;}
}
HTML:
<div id="parent">
<div class="col-sm-8">
<ul class="thumbnails" id="a"></ul>
<ul class="nav nav-tabs" id="b"></ul>
<div class="tab-content" id="c"></div>
</div>
<div class="col-sm-4" id="d">
<div class="main-product-info" id="e"></div>
</div>
</div>
基本上 main-product-info
div 需要在 nav-tabs
导航上方。
我还尝试将父 div 放在 col-sm-8
下面,但页面全乱了......
非常感谢任何建议!
谢谢!
最佳答案
您可以简单地使用 jQuery 函数来完成此操作:append();前();之后();
首先,获取窗口宽度:
var screenWidth = $(window).width();
二、创造条件:
if (screenWidth <= 767) {
$('#b').before($('#e'));
} else {
return false;}
就这些。
关于jquery - 在较小的屏幕上更改 div 顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30946323/