web-dev-qa-db-fra.com

Ordre des colonnes via Bootstrap4

J'ai 3 colonnes que je veux commander de différentes manières sur le bureau et le 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 souhaite la sortie suivante:

1-3-2

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

cssbootstrap-4grid
40
Cray

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;
    }
}

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

11
bprdev

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 exactement un . pull-xs-right class dans Bootstrap 4: X Ajoutez-le simplement à la deuxième colonne et cela devrait fonctionner parfaitement.

2
Marek Kus

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>
0
nikhil sugandh