Bootstrap 3 : making a 4 columns grid in lg/md, and a 2 columns grid in xs/sm, with a spectif order

Question

In my Bootstrap 3 layout, at the lg/md boundry, I have 4 columns as sush :

column 1  column 2   column 3   column 4
------    --------   --------  ---------
0          1          4         8
           2          5         9
           3          6         
                      7

(the height of each column is not fixed, it depends of the page)

At the xs/sm boundry, I need it to change to:

col 1          col2
-------        --------
0              4
1              5
2              6
3              7
               8
               9

Any suggestions? I'm trying with pull and push, but without success. I'm stuck with this result

col 1          
-------        
0              
1              
2              
3              col2
               -------
               4
               5
               6
               7
               8
               9

<!-- Col 1 -->
   <div class="col-md-3 col-md-pull-0 col-sm-6">
        0
    </div>

    <!-- Col 2 -->
    <div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6">
        1<br/>2<br/>3
    </div>

    <!-- Col 3 -->
    <div class="col-md-3 col-md-pull-0 col-sm-6">
        4<br/>5<br/>6<br/>7
    </div>

    <!-- Col 4 -->
    <div class="col-md-3 col-md-push-0 col-sm-6 col-sm-push-6">
        8<br/>9
    </div>

Check this answer: http://stackoverflow.com/a/18070242/4157770 — , Sep 23 '15 at 13:22

score 3 · Accepted Answer · answered Sep 23 '15 at 13:25

You should be able to do this by nesting rows. Example from BS docs:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). http://getbootstrap.com/css/#grid-nesting

This assumes that you don't care whether you have two column divs stacked on top of each other to achieve this.

score 0 · Answer 2 · answered Sep 23 '15 at 13:44

Yes ! Netsting rows were a great idea :) I've solved my problem this way :

  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-md-6 col-xs-12">
          0
        </div>
        <div class="col-md-6 col-xs-12">
         1 <br/> 2 <br/> 3
        </div>
      </div>
    </div>

    <div class="col-xs-6">
      <div class="row">
        <div class="col-md-6 col-xs-12">
         4 <br/> 5 <br/> 6 <br/> 7
        </div>
        <div class="col-md-6 col-xs-12">
          8 <br/> 9
        </div>
      </div>
    </div>
  </div>

Thank you very much benhass :) (and of course the people in the comments)

Bootstrap 3 : making a 4 columns grid in lg/md, and a 2 columns grid in xs/sm, with a spectif order

2 Answers2