Comment modifier l'ordre des colonnes Bootstrap 3 sur mobile ?

Comment réorganiser l'ordre des colonnes Bootstrap 3 sur une mise en page mobile

Lors de la création de mises en page réactives à l'aide de Bootstrap 3, vous pouvez rencontrer une situation où l'ordre des colonnes change lors du passage de la vue ordinateur à la vue mobile. Pour résoudre ce problème et garantir que le contenu principal reste en haut sur les appareils mobiles, suivez ces étapes :

1. Inverser l'ordre des colonnes :

Au lieu d'utiliser l'ordre des colonnes standard (barre latérale à gauche, contenu à droite) pour la vue sur ordinateur, changez l'ordre pour la vue mobile. Par exemple :

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2. Utilisez les classes push et pull :

Dans la vue du bureau, utilisez col-lg-push et col-lg-pull pour pousser le contenu principal vers la droite et tirer la barre latérale vers la gauche, efficacement échanger leur commande.

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3. Inverser l'ordre des colonnes :

Vous pouvez également inverser l'ordre des colonnes dans le HTML, afin que le contenu principal vienne en premier :

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

En suivant ces étapes , vous pouvez réorganiser efficacement les colonnes sur la vue mobile dans Bootstrap 3, garantissant ainsi la hiérarchie de contenu souhaitée.

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!