bootstrap grid varying height

Question

I want to grid bootstrap columns like this but col doesn't work like that. Is there a way around to achieve this?

Answer 1

This can be solved by using masonry layout. I tried to give it a look only using css. No js implemented. No Bootstrap required.

column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
-moz-column-fill: initial;
-webkit-column-fill: initial;
column-fill: initial;
-moz-column-gap: 1em;
-webkit-column-gap: 1em; 

https://jsfiddle.net/6g5dhtvc/

Answer 2

Bootstrap gives the column look, but to achieve these order you need to combine it with masonry style order, for example like in Pinterest.

Please take a look at this article and it should help you to understand this concept: https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/