2

My current layout looks like this:

<div class="container">
    <div class="row">
        <div class="col-md-8">1. Lorem</div>
        <div class="col-md-4">2. Sollicitudin</div>
        <div class="col-md-8">3. Lorem ipsum</div>
        <div class="col-md-4">4. Pellentesque</div>
        <div class="col-md-8">5. Donec efficitur</div>
        <div class="col-md-4">6. Donec efficitur</div>
        <div class="col-md-8">7. Lorem ipsum dolor</div>
    </div>
</div>

In desktop mode, I want the columns to stack like this:

col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4

And in phone/tablet, I want the columns to stack like this: (starting with col-md-8)

col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4

I am having a big problem, the columns with the same class is not stacking vertically. Instead, they are leaving out a big "empty space". See fiddle of the empty space here.

I fixed this problem with the following CSS:

@media (min-width: 992px) {
    .col-md-4 {
        float: right;
    }
}

See fiddle updated with new css - the columns are now stacking exactly as I want!

But, if col-md-8 is longer than the corrosponding col-md-4, I get the same problems as before , see fiddle with same css as before, but with vertical empty space.

Desired output:

I want the columns with the same class to stack vertically regardless the height. The columns also have to adjust it's height dynamically depending on the amount of "content" it is inside, since this can't be predicted. I can't have columns with fixed heights.

Photoshopped image of the desired output.

bootstrap dynamic and vertical stacked

I have tried to change the order of the columns, so col-md-4 comes first, this fixes it - see fiddle with updated column order. But in mobile/tablet, they stack in the wrong order (starting with col-md-4) and if col-md-4 is longer it messes things up like in, see fiddle of this.

Does anyone know how how to solve this?

shaun
  • 1,017
  • 11
  • 22
Liu Kang
  • 1,359
  • 4
  • 22
  • 45

1 Answers1

1

Stick with the first one and add <div style="clear:none;"></div> after the big content of either of the column. For e.g. like this

    <div class="container">
    <div class="row">
        <div class="col-md-8">1. Lorem</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">3. Lorem ipsum</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">5. Donec efficitur</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">7. Lorem ipsum dolor</div>
    </div>
</div>
Shoeb Mirza
  • 912
  • 1
  • 11
  • 30
  • Thank you for your answer. See here: http://jsfiddle.net/vdexv26g/11/ It didn't seem to do anything? – Liu Kang Apr 18 '15 at 18:39
  • Hey, try this http://jsfiddle.net/vdexv26g/15/ – Shoeb Mirza Apr 18 '15 at 19:03
  • Thanks for taking the time. Edited and added some colurs on my old solution: http://jsfiddle.net/vdexv26g/19/ - applyied the same style to your solution: http://jsfiddle.net/vdexv26g/18/ Your solution actually have more "vertical space" than mine. I want the columns aligned vertically next to each other. No vertical space at all. – Liu Kang Apr 19 '15 at 00:04
  • Well, you must have to note that the height of the div increases with respect to the content. If you want to have equal height of both the coloums then you must use the fixed height for them. Use separate height for the col-md-8 and col-md-4 or like this http://jsfiddle.net/vdexv26g/22 . Thanks – Shoeb Mirza Apr 19 '15 at 05:24
  • The problem is that the content that goes in these "boxes" is not fixed, it's varies depending on what page on the website you are visting. Therefore I can't have a fixed height, the height must be dynamic. Exactly like this jsfiddle.net/vdexv26g/23 - although this dosen't work when `col-md-8` is higher than `.col-md-4` (which is the problem I am trying to solve here). I just updated my question, explaining it all better. – Liu Kang Apr 19 '15 at 12:28