有什麼方法可以在移動視圖上重新排列分區/ 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; }