web-dev-qa-db-fra.com

Ordre des colonnes dans Bootstrap 4 avec Push / pull et col-md-12

J'ai deux colonnes avec la classe col-md-12 chaque.

Dans la vue du bureau, ils devraient s'afficher comme suit:

Col **1** 
Col **2**

Dans la vue mobile, le devrait s'afficher comme suit:

Col **2**
Col **1**

Est-ce même possible avec l'ordre des colonnes de Bootstrap?

Mon code actuel:

<div class="row">
    <div class="col-xs-Push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
14
Cray

MISE À JOUR (FEV 2018) - v4.0.0

Maintenant que bootstrap a été publié, vous pouvez le faire en utilisant order classes utilitaires comme vous avez pu le faire en version bêta (voir ancienne mise à jour ci-dessous), à la différence près qu'ils ont ajouté ces 3 nouvelles classes:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

Fragment

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

OLD UPDATE (OCT 2017) - v4.0.0 beta

Avec la sortie de la version bêta, vous pouvez le faire en utilisant flexbox utilitaires de bootstrap, tels que flex-order

(voir la réponse de @ZimSystem - pour voir la solution avec la version alpha)

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>
21
dippas

Mise à jour 2019 - Bootstrap 4.3 +

Maintenant pleine largeur, 12 unités col-*-12 les colonnes peuvent être inversées en utilisant la commande flexbox .

Dans les anciennes versions Bootstrap 4 versions alpha et bêta, les utilitaires de commande étaient flex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Démo Bootstrap 4 Alpha

Depuis Bootstrap 4.0.0 les utilitaires de commande sont order-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Démo Bootstrap 4.1.0

Voir les documents sur https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

22
Zim

Une solution consiste à créer deux versions du Col 2 et à en placer une au-dessus du Col 1 et une en dessous. Utilisez ensuite tilitaires réactifs pour masquer et afficher en conséquence.

2
Taylor Foster

Vous pouvez utiliser flexbox, puis vous pouvez utiliser des requêtes multimédias pour modifier l'ordre:

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

CODEPEN

ou (ordre par défaut sur les mobiles et les tablettes, inversé sur le bureau):

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

CODEPEN

2
max