jquery - 在较小的屏幕上更改 div 顺序

Question

我正在尝试更改新的 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 下面，但页面全乱了......

非常感谢任何建议!

谢谢!

Answer 1

您可以简单地使用 jQuery 函数来完成此操作:append();前();之后()；

首先，获取窗口宽度:

var screenWidth = $(window).width();

二、创造条件:

 if (screenWidth <= 767) {
         $('#b').before($('#e'));
        } else {
    return false;}

就这些。