html - Bootstrap variable column height and count without breaking flow -

in actual project there bunch of boxes. using bootstraps grid , column system number displayed horizontally changes based on window size. works wonderfully long boxes equal height.

in little example have 11 boxes 1 that's taller others. how can i, without using bootstrap rows or js, have not break flow of boxes? provided couple images demonstrate mean.

css

.box{     border: solid 1px black;     height: 200px; } .taller{     height: 300px; } 

html

<div class="container-fluid">     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box taller"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>     <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div> </div> 

what want:

what getting:

a literal solution put clear: left; on 7th box. not sure if satisfies criteria.

masonryjs js solution issue.