Comment puis-je inverser l'ordre des colonnes Bootstrap 3 sur les mises en page mobiles ?

Réorganisation des colonnes Bootstrap 3 dans les mises en page mobiles

Lors de la conception de mises en page réactives, il est souvent nécessaire d'ajuster l'ordre des colonnes sur des écrans plus petits. Cet article aborde le problème spécifique de la modification de l'ordre des colonnes dans une mise en page mobile Bootstrap 3, où une colonne de la barre latérale s'empile actuellement au-dessus de la colonne de contenu principale.

Problème :

J'ai une mise en page réactive avec une barre de navigation, une barre latérale et un contenu principal. Sur ordinateur, la mise en page apparaît comme :

navbar
[3][9]

Cependant, sur mobile, la mise en page devient :

navbar
[3]
[9]

Je souhaite inverser l'ordre sur mobile pour :

navbar
[9]
[3]

Solution :

Bien qu'il ne soit pas possible de modifier directement l'ordre des colonnes sur mobile en utilisant le système de grille intégré de Bootstrap, il existe une solution de contournement. En inversant l'ordre des colonnes dans le code HTML, vous pouvez manipuler la façon dont elles apparaissent sur différentes tailles d'écran.

Dans ce cas, nous avons :

<div>
<p>Pour inverser l'ordre sur mobile, remplacez-le par :</p>
<pre class="brush:php;toolbar:false"><div>
<p>Par défaut, cela affichera le contenu principal en premier, même sur les appareils mobiles. Les classes col-lg-push et col-lg-pull sont utilisées pour réorganiser les colonnes sur des tailles d'écran plus grandes, en garantissant que la barre latérale reste à gauche et le contenu principal à droite.</p>
<p><strong>Remarque :</strong> Cette solution ne fonctionne que pour les grands écrans (par exemple les ordinateurs portables). Sur des écrans plus petits, les colonnes s'empileront toujours comme prévu par Bootstrap.</p>
</div>