有没有办法在移动视图上重新排序section / 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; }