display:contents; for moving the first image below the title on mobile

web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss

@@ -187,6 +187,34 @@
   }
   // ONLY FOR MOBILE
   @media (max-width:768px){
-
+    div.cols{
+      display: flex;
+      flex-direction: column;
+      // Colonnes et conteneur d'images rendus transparents : chaque .field-item
+      // devient un item direct de .cols, librement ordonnable — l'image extraite
+      // est DÉPLACÉE (une seule occurrence dans le DOM, zéro octet en double).
+      div.col,
+      div.col.right .field_images{
+        display: contents;
+      }
+      div.col.left > header{
+        order: 1;
+      }
+      // Première image remontée sous le titre.
+      div.col.right .field_images .field-item:first-child{
+        order: 2;
+      }
+      // Le reste du contenu de la colonne gauche.
+      div.col.left > :not(header):not(.spacer){
+        order: 3;
+      }
+      // Les autres images, en fin de page.
+      div.col.right .field_images .field-item:not(:first-child){
+        order: 5;
+      }
+      div.col.left > .spacer{
+        display: none;
+      }
+    }
   }
 }