web-dev-qa-db-fra.com

Bootstrap 4, comment inverser l'ordre des colonnes?

J'ai ce scénario simple:

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

fondamentalement si md

A
B

Je voudrais bien, si md

B
A

J'ai essayé beaucoup de variantes trouvées sur le web, comme flex-first et tout le reste .. n'arrive pas à le faire fonctionner

Des idées? 

cssorderbootstrap-4
9
Patrioticcow

Si vous souhaitez modifier l'ordre sur md et les tailles supérieures, vous pouvez utiliser order-md-, ceci est fourni par bootstrap . Il semble que si vous souhaitez modifier l’ordre uniquement sur une taille md, vous devrez définir un ordre normal pour une taille plus grande Fiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

10
Nenad Vracar

Il est également possible d'utiliser les classes auxiliaires flex- pour résoudre ce problème . Cette solution vous permet d'inverser l'ordre sans le nombre d'ordre sur les colonnes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

Le flex-direction est maintenant inversé par défaut (md) et sera annulé sur le point d'arrêt lg.

9
Tim Vermaelen

La solution la plus simple sera:

.row{
    flex-direction: row-reverse;
}
2
Thorben Schmitt