Comment puis-je réorganiser les colonnes Bootstrap 3 sur des écrans plus grands tout en conservant la mise en page mobile ?

Modification de l'ordre des colonnes dans la mise en page mobile Bootstrap 3

Vous travaillez avec une mise en page réactive à l'aide de Bootstrap 3.x, composée de deux colonnes : une barre latérale (3) et contenu (9). Alors que la mise en page s'affiche bien sur les ordinateurs :

navbar
[3][9]

Sur mobile, l'ordre change :

navbar
[3]
[9]

Vous souhaitez maintenir l'ordre sur mobile, avec le contenu en haut.

Solution : Réorganisation des colonnes

L'approche de réorganisation des colonnes varie en fonction de la taille de l'écran. Dans ce cas, vous ne pouvez pas modifier l’ordre sur des écrans plus petits. Cependant, vous pouvez le modifier sur des écrans plus grands.

Étape 1 : Modifier l'ordre des colonnes

Modifiez l'ordre de vos colonnes dans le code :

<!-- Main Content -->
<div>

Par défaut, cela affichera le contenu principal en premier, même sur mobile.

Étape 2 : Utilisez col-lg-push et col-lg-pull

col-lg-push et col-lg-pull vous permettent de réorganiser les colonnes sur de grands écrans. Voici comment afficher la barre latérale à gauche et le contenu principal à droite sur des écrans plus grands :

<!-- Main Content -->
<div>

En utilisant cette méthode, vous pouvez réorganiser les colonnes sur de grands écrans sans affecter la mise en page sur mobile .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!