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

We can achieve it through @media queries

And you need to add alternate float left right for divs

HTML:

    <div class="wid" style="height:80px;background-color:#ccc;float:left;"> div 1 </div>
    <div class="wid" style="height:100px;background-color:red;float:right;"> div 2 </div>
    <div class="wid" style="height:90px;background-color:yellow;float:left;"> div 3 </div>
    <div class="wid" style="height:120px;background-color:green;float:right;"> div 4 </div>
    <div class="wid" style="height:100px;background-color:#ffffd;float:left;"> div 5 </div>

CSS:

.wid{
width:50%;
}

@media screen and (max-width:768px){
.wid{
width:100%;
}
}

Answer 2

Use this jQuery plugin to fix unwanted space issue:

http://brm.io/jquery-match-height-demo/

Answer 3

If you could add jquery maybe this could help. you could add something like:

$(document).ready(function () {
            var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
        });  

adding class right to divs at the right and class left to divs at the left. These will make both divs same height.

The only problem may be you woudn't probably want same height when all div's in the same column. No idea if You can make a jquery code works just when window size > some px (probably) but you could force height to auto with !important at the right media queries. Just my 2 cents.

Edited: I found here that you can make this script works based on a max-width window size:

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Answer 4

As "R Lam" Commented above, this works:

<div class="col-lg-6 col-md-6 col-sm-12">
<div>div1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div>div4</div>
</div>

I was wondering if its ok to have them add up to more than 12, but then i found this question: question link

Actually, it did not work, some spaces still appear..

Answer 5

For a pure css solution, if you don't use the bootstrap styles, you can use display:flex:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-div {
  border: 1px solid #000000;
  width: 50%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .flex {
    flex-direction: column;
  }
  .flex-div {
    width: 100%;
  }
}

<div class="flex">
    <div class="flex-div"> div 1 <br> extra height</div>
    <div class="flex-div"> div 2 </div>
    <div class="flex-div"> div 3 </div>
    <div class="flex-div"> div 4 </div>
</div>

Use the full page link in the above snippet to see how the stacking changes between different screen sizes

Update

The closest I could get to what you is this:

Unfortunately it stacks the divs in columns from left first and is not supported in the older browsers:

.columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  padding: 1px;
}
.columns-div {
  border: 1px solid #000000;
}


@media (max-width: 767px) {
  .columns {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
}

<div class="columns">
  <div class="columns-div">div 1
    <br>extra height</div>
  <div class="columns-div">div 2</div>
  <div class="columns-div">div 3</div>
  <div class="columns-div">div 4</div>
</div>

More information on columns

Columns support

Answer 6

It seems to me that you want your div heights to be dynamic. That means, all the divs inside a row should have the height of the div with more content and therefore the height of the divs will depend on content that can vary. To accomplish that you need more than just CSS, you need some simple JQuery or JavaScript. Using JQuery:

<div class="row first-row">
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 1 </div>
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 2 </div>
</div>
<div class="row second-row">
  <div class="col-lg-6 col-md-6 col-sm-12 same-height"> div 3 </div>
  <div class="col-lg-6 col-md-6 col-sm-12 same-height" onload="FixSizeOfRows()"> div 4 </div>
</div>
<script>
  function FixSizeOfRows(){
    $('.first-row > .same-height').height($('.first-row').height());
    $('.second-row > .same-height').height($('.second-row').height());
  }
</script>

The idea here is to run the FixSizeOfRows() function when your last div has fully loaded. The function FixSizeOfRows() goes row by row injecting the height of the row to each of its child divs (note that the row height increases with the child div that has more content).

I prefer JQuery when manipulating the DOM instead of plain JavaScript. With JavaScript you could do something similar but a bit more complex. Let me know if you need more clarification on how this code works.