Existe-t-il un moyen de réorganiser les sections/divs sur la vue mobile?

Question

Travail sur un site Web construit à Shopify. J'ai besoin de réorganiser les divs dans Shopify ou, plus spécifiquement, de faire apparaître les collections de produits au-dessus d'autres sections en mode mobile.

J'ai essayé d'utiliser jQuery: $("#paragraph3").insertBefore("#paragraph2");

Mais il n'a pas aidé.

Des suggestions?

Merci.

Answer 1

Vous pouvez simplement utiliser la fonctionnalité flex qui vous permet de réorganiser les éléments.

Par exemple, vous pouvez envelopper toutes les sections avec un élément et le définir sur display: flex et utiliser l'attribut order pour les éléments que vous souhaitez déplacer.

Exemple:

<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; }