Inverser les colonnes sur smartphone
La solution ultime pour votre responsive.
Il existe une technique pour inverser vos colonnes sur smartphone qui consiste à rendre invisible certaine section sur bureau et visible sur smartphone.
Bonne option ? Pas si sûr !
Cette technique vous assurera bien un bon design, mais alourdira votre page et vous pénalisera auprès de Google qui n’apprécie guère les sections invisibles.
Vous trouverez ci-dessous la meilleure façon de le faire. Simple, rapide et efficace.
Le tuto en vidéo
Tutoriel écrit
Votre design su version desktop (ordinateur) va être de la façon suivante :
image-texte et sur la ligne du dessous texte-image
Cliquer sur la roue crantée de la deuxième ligne en vert
Allez dans le troisième onglet « Avancé » et dans « Classe CSS » écrivez le mot « inverse » puis sauvegardez.
Allez tout en bas de votre page et cliquer sur les 3 petits points, puis sur la roue crantée pour accéder au settings de la page.
Allez au troisième onglet « Avancé » « personnaliser CSS » et copier le code ci-dessous.
CODE CSS
@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}
Sauvegardez tous les paramètres et le tour est joué.