Ordre des colonnes dans Bootstrap 4
j'ai 3 colonnes que je veux commander de différentes façons sur le bureau et mobile. Actuellement, mon gird 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 la vue mobile je veux avoir l'ordre suivant:
1-3-2
malheureusement je ne comprends pas comment résoudre cela avec le .col-md-push-* et .col-md-pull-* les classes de Bootstrap 4.
6 réponses
un Réexamen de cette question avec la dernière Bootstrap 4.0+ .
Le sensible "1519190920 à la commande des classes sont maintenant order-first , order-last et order-0 - order-12
Le Bootstrap 4 push "1519160920 pull classes sont maintenant push-{viewport}-{units} et pull-{viewport}-{units} et l'infix xs- a été supprimé. Pour obtenir les 1-3-2 layout sur mobile / xs serait: Bootstrap 4 push pull demo
comme Bootstrap 4 est flexbox, il est facile de changer l'ordre des colonnes. Les CLO peuvent être commandés de order-1 à order-12 , répondant comme order-md-12 order-2 (dernier sur md , deuxième sur xs ) par rapport au parent .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 De Mise À Jour De Bootstrap 4.0+
démonstration de commande de Col
bureau (écrans plus grands):
Mobile (petits écrans):
démos de la version précédente
Démo-alpha 6
démo - bêta (3)
voir plus de Bootstrap 4.0+ commander des démos
connexes:
commande de colonne dans Bootstrap 4 avec push / pull et col-md-12
Bootstrap 4 modifier l'ordre des colonnes
A-C-B A-B-C
cela peut également être réalisé avec la propriété CSS" Order " 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
J'utilise Bootstrap 3, donc je ne sais pas s'il y a 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>
EDIT:
Ohh... on dirait que ce que j'ai écrit ci-dessus est exactement un . pull-xs-droit classe de Bootstrap 4 :X il suffit de l'ajouter à la deuxième colonne et il devrait fonctionner parfaitement.
même cela marchera:
<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>
puisque la commande par colonne ne fonctionne pas dans Bootstrap 4 beta comme décrit dans le code fourni dans la réponse révisée ci-dessus, vous devez utiliser ce qui suit (tel qu'indiqué dans les liens codeply 4 Flexbox order demo - alpha/beta qui ont été fournis 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 cependant que le "Flexbox order demo-beta" va à une base de codes alpha, et en changeant le codebase en Beta (et en l'exécutant) les résultats dans les divs s'affichant incorrectement dans un colonne simple -- mais cela ressemble à un problème codeply depuis la coupe et le collage du code hors des travaux codeply comme décrit.
vous pouvez faire deux conteneurs différents un avec l'ordre mobile et se cacher sur l'écran de bureau, un autre avec l'ordre de bureau et se cacher sur l'écran mobile