Comment obtenir un comportement de colonne push/pull réactif dans Bootstrap 3 ?

Pousser et tirer des colonnes dans Bootstrap 3

Lors de la conception de mises en page réactives, il est souvent nécessaire de réorganiser ou de modifier les colonnes sur des tailles d'écran plus petites. Bien que Bootstrap 3 fournisse des classes telles que col-xs-6 pour ajuster la largeur des colonnes, il n'offre pas de prise en charge directe pour pousser ou tirer des colonnes sur des points d'arrêt spécifiques.

Obtenir un push/pull réactif

Pour obtenir le comportement push/pull souhaité sur des écrans plus petits, on peut utiliser une approche contre-intuitive : « le mobile d'abord ». Commencez par définir la disposition souhaitée pour les écrans plus petits avec vos classes col-xs-* préférées, puis appliquez les classes col-lg-* avec col-lg-push-* ou col-lg-pull-* pour positionner les colonnes sur des écrans plus grands.

Par exemple, pour imiter la disposition indiquée dans la question :

<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>

De cette façon, les colonnes apparaîtront dans l'ordre spécifié pour les écrans plus petits, tout en ajustant leur positionnement sur les bureaux plus grands via col -lg-* classes. Essentiellement, cette approche consiste à inverser le processus habituel consistant à commencer par la mise en page du bureau et à l'ajuster pour le 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!