Comment obtenir un ordre de colonne réactif dans Bootstrap 3 à l'aide de classes Push et Pull ?

Push/Pull Colonnes de manière réactive avec Bootstrap 3

Dans Bootstrap 3, vous pouvez tirer parti des puissantes classes push et pull pour manipuler l'ordre et position des colonnes sur différentes tailles d'écran. Un scénario courant consiste à réorganiser la disposition des colonnes sur des écrans plus petits pour optimiser la visibilité et la convivialité.

Considérez la disposition suivante sur des écrans plus grands :

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

Cependant, vous souhaiterez peut-être afficher les colonnes. différemment sur des écrans plus petits, tels que :

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

Au départ, vous pouvez tenter d'y parvenir en attribuant à la fois les tailles d'écran grand et petit dans les classes de colonnes, comme ceci :

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4">3</div>
<div class="col-lg-2 col-xs-4">4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div></code>

Cependant, cette approche entraîne souvent une mise en page inattendue ou des éléments manquants.

Pour résoudre ce problème, adoptez un état d'esprit « mobile first ». Au lieu de commencer par les plus grandes tailles d’écran, définissez d’abord la disposition des plus petits écrans. Ensuite, utilisez les classes push et pull pour ajuster l'ordre des colonnes sur des écrans plus grands.

Par exemple, le code suivant obtient la disposition souhaitée :

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

En organisant les colonnes dans l'ordre souhaité sur les écrans plus petits d'abord, vous pouvez ensuite les pousser et les tirer de manière sélective dans la bonne position sur les écrans plus grands sans perdre aucun élément. Cette approche garantit une mise en page réactive et conviviale sur toutes les tailles d'écran.

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!