Classement des colonnes dans Bootstrap 4

Question

J'ai 3 colonnes qui je veux commander de différentes façons sur desktop et mobile. Actuellement, mon ceindre ressemble à ceci:

<div class="row">
	<div class="col-xs-3 col-md-6">
		1
	</div>
	<div class="col-xs-3 col-md-6">
		2
	</div>
	<div class="col-xs-6 col-md-12">
		3
	</div>
</div>

Dans l'affichage mobile je veux avoir l'ordre suivant:

1-3-2

Malheureusement je ne comprends pas comment résoudre ce problème avec la .col-md-push-* et .col-md-pull-* les classes de Bootstrap 4.

Answer 1

Un réexamen de cette question avec la dernière Bootstrap 4.0+.

La réponse de la commande de classes sont désormais order-first, order-last et order-0 - order-12

Le Bootstrap 4 push pull classes sont maintenant push-{viewport}-{units} et pull-{viewport}-{units} et de la xs- infix a été supprimé. Pour obtenir les 1-3-2 mise en page sur mobile/xs serait: Bootstrap 4 push-pull démo

---

Depuis Bootstrap 4 est flexbox, il est facile de modifier l'ordre des colonnes. Les cols peuvent être commandés à partir d' order-1 de order-12, sensiblement comme order-md-12 order-2 (dernière sur md, 2e xs) par rapport à la société mère .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

2018 Jour Bootstrap 4.0+
Le Col de la commande demo

De bureau (les écrans de grande taille):

Mobile (petits écrans):

Ancienne version démos
démo - alpha 6
démo - bêta (3)

Voir plus de Bootstrap 4.0+ commande démos

---

Connexes:
Colonne de commande dans le Bootstrap 4 avec push/pull et le col-md-12
Bootstrap 4 modifier l'ordre des colonnes

A-C-B A-B-C

Answer 2

Cela peut également être réalisé avec la propriété CSS "Commande" et une requête multimédia.

Quelque chose comme ça:

 @media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}
 

Lien CodePen: https://codepen.io/preston206/pen/EwrXqm

Answer 3

même cela fonctionnera:

 <div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>
 

Answer 4

J'utilise Bootstrap 3, donc je ne sais pas s'il existe un moyen plus facile de le faire Bootstrap 4 mais ce css devrait fonctionner pour vous:

 .pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}
 

... et ajouter la classe à la deuxième colonne:

 <div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>
 

MODIFIER:

Ohh ... on dirait que ce que j'ai écrit ci-dessus est exacly a. classe pull-xs-right dans Bootstrap 4: X Ajoutez-le simplement à la deuxième colonne et cela devrait fonctionner parfaitement.

Answer 5

Depuis la colonne de commande ne fonctionne pas dans le Bootstrap 4 beta comme décrit dans le code fourni dans l'revisité la réponse ci-dessus, vous devez utiliser la suite (comme indiqué dans la codeply 4 Flexbox afin de démonstration - alpha/bêta liens qui ont été fournies dans la réponse).

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

Notez toutefois que "la Flexbox ordre démo - bêta" va à l'alpha de la base de code, et modifiant le code de la Bêta (et exécuter) résultats dans les divs incorrecte de l'affichage dans une seule colonne -- mais qui ressemble à un codeply question depuis de couper et coller le code de codeply fonctionne comme décrit.