Fill the blank space between the two div elements

Question

I'm sorry that I am so poorly versed. I use the flexible grid from http://www.responsivegridsystem.com/ and using 3 column styles.

What I want to achieve is largely shown in the image. The order in which DIV elements are generated is marked. The problem here is that after creating 1, 2, 3 4 you should go to the point of the arrow of the place. I do not mind even 6, but there the place must be filled.

Div Elements Generated Using a Database

<div class="section group">
<div class='col span_2_of_6 classifyGroup' style="height:50px;">
    <h3 class='classifyHeading'>BEVERAGES</h3>
</div>
<div class='col span_2_of_6 classifyGroup' style="height:75px;">
    <h3 class='classifyHeading'>salads</h3>
</div>
<div class="section group">

I uploaded the site here

Answer 1

• -webkit-column-count: 3;
• div span_2_of_6 span_1_of_1
• width:100%;margin-left:0 important; .col

Answer 2

, . CSS multiple-columns, :

jsFiddle

. CSS . : http://caniuse.com/#search=columns

IE8/9, isotope jQuery: http://isotope.metafizzy.co/