Ce tutoriel à pour but de vous expliquer comment réaliser une double inversion de colonne.
Mettre en place une double inversion de colonnes
La double inversion de colonne va vous permettre d'insérer votre colonne de gauche à l'intérieur des éléments de la colonne de droite en mobile comme sur l'exemple ci dessus.
Effectivement lors de la création d'un bloc classique la colonne de droite s'affichera sous la colonne de gauche, c'est le sens classique du responsive.
1. Vue desktop
Dans une section vide créer trois groupes l'un en dessous de l'autre.
Ensuite modifier la largeur du premier groupe à 50% et l'aligner à droite. Cela est important pour garantir le fonctionnement de la manipulation.
Pour le deuxième groupe modifier la largeur à 46% et l'aligner à gauche, il remontera automatiquement à gauche.
Et pour le troisième et dernier groupe modifier la largeur à 50% et l'aligner à droite, il remontera automatiquement à droite.
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
Les groupe seront automatiquement au bon emplacement et donc inversés.
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.