How To Automatically Move Element In Available Vertical Space?

I have elements on a web page. For tablet breakpoints, the content will go 50% width and break up into two columns. However, sometimes depending on the content, there are times w

Solution 1:

I suggest to use Masonry

Your html structure should be

<div class="container"> <div class="row"> <div class="col" style="height: 900px; background-color: blue;"></div> <div class="col" style="height: 500px; background-color: red;"></div> <div class="col" style="height: 200px; background-color: orange;"></div> <div class="col" style="height: 600px; background-color: yellow;"></div> <div class="col" style="height: 300px; background-color: green;"></div> <div class="col" style="height: 400px; background-color: purple;"></div> </div> </div>

After include the Masonry .js file in your site. Initialize with jQuery

$(document).ready(function(){ $('.row').masonry({ // options itemSelector: '.col', columnWidth: '.col' }); });

https://jsfiddle.net/a8ar7eyx/2/