有什么方法可以在移动视图上重新排列分区/ div的排序？

Question

在Shopify中构建的网站上工作。我需要在Shopify中重新订购div，或者更具体地说，使产品系列在移动视图中显示在其他部分之上。

我试着使用jQuery：$("#paragraph3").insertBefore("#paragraph2");

但它并没有帮助。

有什么建议吗？

谢谢。

Answer 1

您可以简单地使用flex功能，允许您重新排列元素。

例如，您可以用一个元素包装所有部分，并将其设置为display: flex，并对您想要移动的元素使用order属性。

例子：

<div class="section-wrapper"> 
    <div class="sectiion-1"> 
     ... 
    </div><!-- /.sectiion-1 --> 
    <div class="sectiion-2"> 
     ... 
    </div><!-- /.sectiion-2 --> 
    .... 
</div><!-- /.section-wrapper --> 

.section-wrapper { display: flex; } 
.section-wrapper .section-1 { order: 2; } 
.section-wrapper .section-2 { order: 1; }