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

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 1 
 extra height
    
 div 2 
    
 div 3 
    
 div 4 

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 1
    
extra height
  
div 2
  
div 3
  
div 4

More information on columns

Columns support