Comment réorganiser différemment les colonnes Bootstrap pour les vues de bureau et mobiles ?

Empilage des colonnes Bootstrap dans un ordre différent sur mobile

Dans Bootstrap 4, la disposition des colonnes peut être un peu difficile à personnaliser lors du basculement entre les vues de bureau et mobiles. Abordons un scénario particulier : vous avez deux colonnes et une ligne imbriquée dans la colonne de droite. Votre objectif est de rendre la mise en page réactive de telle sorte qu'elle s'affiche comme suit :

Version de bureau :

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

Version mobile (empilée dans l'ordre) :

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Utilisation des flotteurs et désactivation de Flexbox

La valeur par défaut La disposition flexbox dans Bootstrap 4 garantit une hauteur égale pour les colonnes. Pour obtenir la disposition de bureau souhaitée, vous pouvez désactiver flexbox pour les grands écrans et utiliser des flotteurs à la place :

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

Utilisation de Flexbox Wrapping Hack

Vous pouvez également utiliser un hack d'emballage flexbox qui utilise w -auto :

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

Considérations

Les deux approches ont leurs propres avantages et inconvénients. La méthode float est plus simple mais peut entraîner des problèmes d'alignement et de réactivité. Le hack d'emballage offre une meilleure réactivité mais nécessite un CSS plus complexe.

Ressources supplémentaires

• [Comment corriger l'ordre inattendu des colonnes dans bootstrap 4 ?](...)
• [Hauteur des colonnes réactives Bootstrap](...)
• B-A-C -> ABC

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!