Panoramique header - Labo de Creativconflans.fr

Inverser les colonnes avec Push et Pull en responsive


Cela fait longtemps que je n’avais pas posté un article, mais aujourd’hui je vais vous parler d’Inverser les colonnes avec Push et Pull en responsive avec Bootstrap.

Dernièrement pour un site web, la cliente voulait inverser son contenu avec la photo à la une lorsqu’on était sur mobile et tablette. Il y a plusieurs méthodes pour y parvenir.

Schéma pour inverser des colonnes avec bootrap

1ère méthode : Inverser les colonnes avec Push et Pull

Il existe une class CSS propre à Bootstrap pour inverser les colones.

Lorsqu’on utilise col-sm-push et col-sm-pull on ne peut pas les utiliser avec la class col-sm-12 du coup il existe une autre solution avec notre deuxième méthode. Push est utilisé pour pousser et pull est utilisé pour rétrécir, quand on poussera une colonne, elle prendra le dessus par rapport à celle qu’on veut rétrécir du coup on aura l’effet inverse en responsive.
Je vous invite à visiter ce site pour faire vos tests avant de l’appliquer sur votre site : http://jsbin.com/geladetoge/edit?html,css,output

2ème méthode : Inverser les colonnes avec le Row

Le résultat sera le même que la première méthode à une exception prêt, on peut l’utiliser avec des col-sm-12. Il nous faut un peu de CSS pour compléter ce morceau de code.

Comme vous pouvez voir dans cet exemple http://jsbin.com/huhojufili/edit?html,output, on peut inverser même avec la class col-sm-12 simplement en ajoutant une class CSS au niveau row.

Si vous désirez, en savoir un peu plus avec la classe direction, je vous conseil ce site : Playground w3schools

Documentation sur le site du Bootstrap : Column ordering.

Commentaires