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

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 1 
  
 div 2 


  
 div 3 
  
 div 4 

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.