How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap

Question

I really don\'t know how to put this in words.

When I have 2 divs in a row, each has different height, so the next row have unwanted space.

But stack correct

Answer 1

Revised answer

I have sorted out some code with the help of this answer https://stackoverflow.com/a/32565224/3956566

I have used a small width to demonstrate it, that is for you to customise. Also put any changes in css in a site.css file, not bootstrap and call the site.css after the bootstrap, so changes are overridden.

Css:

div {outline:solid 1px red; }

  .left {
 } 
  .right {
 }  

Html:

<div style="display:none">
<div id="1"  class="left" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right" style="height:20px;">DIV 2</div>
<div id="3" class="left" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right" style="height:170px;">DIV 4</div>
<div id="5" class="left" style="height:120px;background-color:yellow;">DIV 5</div>
<div id="6" class="right" style="height:30px;">DIV 6</div>
<div id="7" class="left" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right" style="height:90px;">DIV 8</div>
</div>
<div id="div1" style="width: 50%;float:left;background-color:grey"></div>
<div id="div2" style="width: 50%;float:right;background-color:blue"></div>
<div id="div3" style="width: 100%;float:left;background-color:white"></div>

JQuery:

if ($(window).width() > 400) {
    $('#div1').append($('.left'));
    $('#div2').append($('.right'));
}
if ($(window).width() < 400) {
    $('#div3').append($('#1'));
    $('#div3').append($('#2'));
    $('#div3').append($('#3'));
    $('#div3').append($('#4'));
    $('#div3').append($('#5'));
    $('#div3').append($('#6'));
    $('#div3').append($('#7'));
    $('#div3').append($('#8'));
}


$('#div1').append($('.left'));
$('#div2').append($('.right'));

$( window ).resize(function() {
    if($(window).width()>400){
        $('#div1').append($('.left'));
        $('#div2').append($('.right'));  
    }
    if($(window).width()<400)
    {
        // These need to be added in order, as appending them to the
        // first two divs reorders them.
        $('#div3').append($('#1'));
        $('#div3').append($('#2'));
        $('#div3').append($('#3'));
        $('#div3').append($('#4'));
        $('#div3').append($('#5'));
        $('#div3').append($('#6'));
        $('#div3').append($('#7'));
        $('#div3').append($('#8'));
    }
});

See fiddle:

https://jsfiddle.net/kermit77/vo439fte/4/

---

First answer

Beyond putting in calculations determining individual div height and then adjusting margins accordingly (for the larger layouts only!);
i.e.

div 1 height = a, div 2 height = b

div diff = (a-b)

if diff >0

div 4 top margin = -diff

else

div 3 top-margin = -diff;

But you would need to keep a running total of odd numbered div heights and even numbered div heights and adjust accordingly.

I've trimmed down the widths to test it. You need to clear left on every 3rd div to prevent it being placed on the right hand side.

<div class="row">
    <div class="col-lg-6  col-sm-12" style="height:100px;">DIV 1</div>
    <div  class="col-lg-6  col-sm-12" style="height:80px;">DIV 2</div>
    <div  class="col-lg-6  col-sm-12" style="height:50px;clear:left;">DIV 3</div>
    <div  class="col-lg-6  col-sm-12" style="height:40px;">DIV 4</div>
</div>

For every 3rd div clear left.

css:

div {outline:solid 1px red; }
.row {
    margin-right: 2px;
    margin-left: 2px;
}
@media (min-width: 500px) {
.container {
    max-width: 1170px;
}
.col-lg-6 {
    max-width:50%;
    width: 50%;
    float:left;
    clear:right;
}  
}
@media (min-width: 150px) {
.container {
    max-width: 500px;
}
.col-sm-12 {
    width: 100%;
}
}