Ce tutoriel à pour but de vous expliquer comment inverser le sens de vos colonnes en mobile.
Mettre en place une inversion de colonnes (quinconce)
Effectivement lors de la création d'un bloc classique l'image de gauche passera toujours en dessous de l'image de droite, c'est le sens classique du responsive. Ici on va vous expliquer comment modifier ce sens d'affichage en mobile.
1. Vue desktop
Dans une section vide créer deux groupes l'un en dessous de l'autre.
Paramétrer le premier groupe à une largeur de 50% et ensuite l'aligner à droite. Cela est important pour garantir le fonctionnement de la manipulation.
Ensuite, paramétrer le deuxième groupe à une largeur de 46% et l'aligner à gauche.
Il est important de garder 4% d'écart entre les deux groupes, sinon il est possible que certains décalages se produisent sur Outlook. Vous pouvez très bien créer des groupes avec des largeurs différentes, il suffit de bien conserver les 4% d'écart.
2. Vue mobile
La configuration des deux groupes est héritée en vue mobile. ici, le premier groupe à droite affiche une largeur à 50% de la vue mobile.
Et le second groupe à gauche affiche une largeur à 46% de la vue mobile.
Pour configurer correctement l'inversion des colonnes, il suffit de renseigner la largeur 100% pour chaque groupe.
L'image de droite sera alors affichée au-dessus de l'image de gauche.
Vous pouvez utiliser l'inversion de colonnes pour inverser le sens des images comme nous venons de le voir. Mais vous pouvez insérer tout type de contenu dans ces groupes.
Pour en savoir plus sur l'inversion de colonnes, consultez notre Live dédié : Inverser l'ordre des colonnes sur mobile