0

How to force elements to fall right under its top element floating from left if width of box is static but height can vary. Bootstrap after droping element to next line put it right under the element with the smallest height. That makes gaps vertically between elements.

<div class="row">
 <div class=col-lg-2></div>
 <div class=col-lg-2></div>
 <div class=col-lg-2></div>
    ...
</div>

But i want it to float always from left to right as its specified in image May it be done using pure css?

enter image description here

Brivvirs
  • 2,461
  • 3
  • 18
  • 31
  • 1
    If you build columns instead of rows, then you can do it with CSS. http://w3bits.com/css-masonry/ There are also some cool plugins that do it, like masonry http://masonry.desandro.com/ – Michael Coker Apr 20 '17 at 21:20
  • For mobile display are you wanting it too list 1 2 3 4 5 6 8 9... or is it okay to go 1 6 11 2 7 12 3 8 13 4 9 14 5 10 15? – Geoff Apr 20 '17 at 21:22
  • Problem here is that building blocks by columns would ruin the horizontal float and therefore an order. Which would require to add logic for order. – Brivvirs Apr 20 '17 at 21:36

0 Answers0