web-dev-qa-db-fra.com

Modifiez l'ordre des colonnes col - * - 12 dans Bootstrap using Push / pull

J'ai deux colonnes de même taille (.col-xs-12) et je changerais leur place lorsque la taille de l'écran correspondrait à celle d'un appareil mobile. Je les placerais dans l'ordre inverse.

J'ai lu que les directives Push et pull bootstrap aident à accomplir cela, mais est-il possible de changer la place de deux colonnes de la même taille avec les classes suivantes?

div.col-xs-12.col-xs-Push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2
csstwitter-bootstraptwitter-bootstrap-3responsive-designgrid-layout
37
Mazzy

En fait, vous ne pouvez pas réorganiser les colonnes ayant .col-*-12 par Push/pull classes d'assistance. La somme des colonnes dépasse la valeur par défaut 12 colonnes qui est définie par @grid-columns.

Vous pouvez soit modifier l'ordre des colonnes en HTML, puis utiliser les classes de classement sur des écrans plus grands comme suit:

EXEMPLE ICI

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-Push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

Ou utilisez cette approche fantaisiste pour inverser l'ordre des colonnes qui sont placées verticalement les unes sous les autres:

EXEMPLE ICI

@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

Il convient de noter que les transformations CSS sont également prises en charge dans IE9 ; N'oubliez pas d'ajouter des préfixes de fournisseurs.

60
Hashem Qolami

Dans Bootstrap 4 , vous pouvez changez l'ordre des colonnes pleine largeur (12 unités) à l'aide des classes de classement flexbox.

Mise à jour 2017 - Bootstrap 4 alpha 6

Dans 3.x, vous ne pouviez que pousser/tirer les colonnes à gauche ou à droite (horizontalement). Avec le nouveau flexbox ordering utils in 4.x, il est désormais possible de changer verticalement l'ordre des colonnes ). .

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

Mise à jour Bootstrap 4 Beta

L'alpha flex- la commande classée est devenue order- Des classes.

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

6
Zim

Vous pouvez totalement le faire, voir Ordre des colonnes de la grille de Bootstrap

Mais bien sûr, votre exemple n'aura aucun effet puisque xs-12 est une colonne pleine largeur, donc cela ne s'appliquera qu'aux modèles où la somme des colonnes est 12 (ou si 16 ou autre si vous personnalisez votre Bootstrap grid). Voir l'exemple Bootstrap sur cette même page à des fins d'illustration:

<div class="row">
  <div class="col-md-9 col-md-Push-3">.col-md-9 .col-md-Push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
3
Devin

Dans le cas où quelqu'un viendrait ici avec un problème similaire comme moi, trouver uniquement Push/pull ne correspond pas à vos besoins, car soit col-xs-12 ne tirera pas/Push, soit utiliser plus de 2 colonnes rend plus difficile de comprendre le Push/tirer des valeurs ici est ma solution.

Ci-dessous est la solution de fantaisie par @hashemquolami

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

Bien que cette approche fonctionne bien, j'ai une solution différente:

La grille bootstrap fonctionne en flottant les colonnes à gauche, cela peut facilement être modifié avec css. Regardez le balisage ci-dessous, comme bonus col-md-offset-1 inversé pour émuler 5 colonnes centrées.

[~ # ~] html [~ # ~] 

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

[~ # ~] css [~ # ~] 

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

JSFIDDLE

1
DGRFDSGN

Si vous devez réorganiser les cols pour un cas réactif comme

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

vous pouvez utiliser un .pull-right classe et inverser l'ordre des colonnes.

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

alors ils sont en ordre pour col-xs-12 et apparaissent correctement pour les autres points d'arrêt.

1
bluetwin

J'ai eu le même problème et l'ai résolu de cette façon:

HTML 

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

CSS 

@media (max-width: 767px){
    .less-than {
        display: none;
    }
    .more-than {
        display: block !important;
    }
}
0
Janek Kozera