Changer l'ordre des colonnes col - *-12 dans Bootstrap en utilisant push / pull

en fait, vous ne pouvez pas réordonner les colonnes ayant .col-*-12 par push / pull classes helper. La somme des colonnes dépasse la valeur par défaut 12 qui est définie par @grid-columns .

vous pouvez soit modifier L'ordre des colonnes en HTML, puis utiliser les classes d'ordre 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 l'une sous l'autre:

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 est intéressant de noter que CSS transforme sont pris en charge dans IE9 ainsi; juste ne pas oublier d'ajouter des préfixes vendeur.

dans Bootstrap 4 , vous can modifiez l'ordre des colonnes pleine largeur (12 unités) en utilisant les classes de commande flexbox.

Update 2017 - Bootstrap 4 alpha 6

en 3.x vous pouvez seulement pousser / tirer des colonnes à gauche ou à droite (horizontalement). Avec la nouvelle commande flexbox utils en 4.x, il est maintenant possible de changer l'ordre des colonnes verticalement ...

<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 Bêta

l'alpha flex- de la classe de commande ont été remplacés par order- 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

Vous pouvez tout à fait le faire, consultez la section Bootstrap de la Colonne de la Grille de Commande

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 de 12 (ou si 16 ou n'importe quoi si vous personnalisez votre grille Bootstrap). Voir l'exemple de Bootstrap sur cette même page à titre indicatif:

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

si vous avez besoin de réordonner 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 une classe .pull-right 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 qu'ils sont dans l'ordre pour col-xs-12 et apparaissent correctement pour les autres points d'arrêt.

dans le cas où quelqu'un vient ici avec un problème similaire comme moi, seulement trouver push/pull ne correspond pas à vos besoins, parce que soit col-xs-12 wont pull/push ou en utilisant plus de 2 colonnes rend plus difficile de comprendre les valeurs push/pull voici 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:

Le bootstrap grille des œuvres de flottant les colonnes à gauche, cela peut facilement être modifié avec css. Regardez la marge ci-dessous, comme col-md-offset-1 bonus 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

j'ai eu le même problème et je 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;
    }
}