Bootstrap 6-colonne réactive

Je suis à l'aide d'un Bootstrap de mise en page pour mon design et je suis sur le point de le rendre réceptif et d'économie nécessaires afin. Par exemple comme ceci:

<div class="row">
   <div class="col-sm-4 col-md-2" >div1</div>
   <div class="col-sm-4 col-md-2" >div2</div>
   <div class="col-sm-4 col-md-2" >div3</div>
   <div class="col-sm-4 col-md-2" >div4</div>
   <div class="col-sm-4 col-md-2" >div5</div>
   <div class="col-sm-4 col-md-2" >div6</div>
</div>

Sur md – fenêtres, je vais devenir comme ceci:

div1 div2 div3 div4 div5 div6

Sm - fenêtres:

div1 div2 div3
div4 div5 div6

Comment ai-je pu réorganiser les colonnes pour obtenir ce genre sur le sm-fenêtres:

div1 div3 div5
div2 div4 div6

En d'autres termes – tous les même colonnes à descendre, et tous les deux colonnes doivent rester en place. Est-il possible?

OriginalL'auteur user3292126 | 2014-02-19

  1. 6

    Tout simplement introduire une nouvelle série de colonnes:

    <div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div1</div>
            <div class="col-sm-12 col-md-6" >div2</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div3</div>
            <div class="col-sm-12 col-md-6" >div4</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div5</div>
            <div class="col-sm-12 col-md-6" >div6</div>
        </div>
    </div>
</div>

    JSFiddle démo.

    Grand. merci beaucoup !
    pas de soucis. N'oubliez pas de marquer ce que l'on a accepté de répondre à fermer la question lorsque vous avez la chance. 🙂

    OriginalL'auteur James Donnelly

  2. 5

    À l'aide de le col-*-push-N et col-*-pull-N de la colonne de commande des classes devrait faire l'affaire:

    <div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

    CodePen: http://codepen.io/anon/pen/eakfH

    OriginalL'auteur cvrebert