Bootstrap order columns same width together

Question

I have a problem reordering columns and stacking it when they got the same width. This is the code from my website:

...
<div class="row">
  <div class="col-md-3 com-sm-4 hidden-xs">col-1 (</div>
  <div class="col-md-6 com-sm-8">col-2 (main content)</div>
  <div class="col-md-3 com-sm-4 hidden-xs">col-3</div>
</div>
...

So what I'm trying to achieve on small devices is this:

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
| col-3 | |       |
|       | |       |
--------- |       |
          ----------

But what I got is this:

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
          |       |
          |       |
          |       |
--------- ---------
| col-3 | 
|       | 
---------

How can I order those two colums to stack together?

Probablu duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Apr 28 '16 at 12:12

Carol Skelly · Answer 1 · 2016-04-28T14:24:24.417

2

Assuming that col-2 is taller than the others you can do..

<div class="row">
        <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4">
            2
        </div>
        <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8">
            1
        </div>
        <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8">
            3
        </div>
 </div>

Demo (option 1): http://codeply.com/go/E9i34J7QMa

Another option is nesting..

<div class="row">
        <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4">
            2
        </div>
        <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8">
            <div class="row">
                 <div class="col-md-12">
                    1
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8">
            <div class="row">
                <div class="col-md-12">
                    3
                </div>
            </div>
        </div>
</div>

Demo (option 2): http://codeply.com/go/E9i34J7QMa

edited Apr 28 '16 at 14:24

answered Apr 28 '16 at 12:19

Carol Skelly

351,302
90
710
624

This was really close! In some pages the col-2 is shorter and it seems this doesn't work. Any advise? – Jose M Apr 28 '16 at 13:41
I tested the second option and if the col-2 is larger we have the same problem as now. The col-3 will be situated at the end of that column. – Jose M Apr 28 '16 at 14:12
Tested and we got the same problem as the first option. When the col-2 is shorter the col-3 just disapears. I was trying to find how to make col-2 to occupy all the height of the page just to prevent this situation. It could be a great approach, right? – Jose M Apr 28 '16 at 14:33

score 0 · Answer 2 · answered Apr 28 '16 at 12:17

It's because your col-1 and col-2 are in the same row, but col-3 is seperate. What you need is this:

<div class='row'>
  <div class='col-xs-6'>
    <div class='row'>
      <div class='col-xs-12'>
        Col-1
      </div>
    </div>
    <div class='row'>
      <div class='col-xs-12'>
        Col-3
      </div>
    </div>
  </div>
  <div class='col-xs-6'>
    Col-2
  </div>
</div>

score 0 · Answer 3 · answered Apr 28 '16 at 12:31

Use a row div to separate the last one then adjust using the col classes. I believe I've gotten what you're looking for right here. If you click the the mobile it stacks correctly without whitespace.

Here's the code as well:

<div class="row col-md-8">
<div class="col-md-6 col-xs-4 " style="background:lightblue">col-1 (</div>
<div class="col-md-6 col-xs-8" style="background:green">col-2 (main content)</div>
</div>
 <div class="row col-md-4">
 <div class="col-md-12 col-sm-2 col-xs-4" style="background:lightblue">col-3</div>
</div>

Bootstrap order columns same width together

3 Answers3