Блоки разной высоты в 2 колонки

Блоки разной высоты вертикально друг за другом CSS3.

/* Тени на нижних углах артикула бонусом */

/* нужны всего 5 строчек: 2 из section и 3 из article */

@media (min-width: 400px) {
section.novoe {
columns: 1; /* выстроить в 1 колонку */
column-fill:auto; /* еще есть значение balance */
}
}
@media only screen and (max-width: 600px) and (min-width: 400px)  {
section.novoe {
columns: 1; /* выстроить в 1 колонку */
column-fill:auto; /* еще есть значение balance */
}
}
@media only screen and (max-width: 600px)  {
section.novoe {
columns: 1; /* выстроить в 1 колонку */
column-fill:auto; /* еще есть значение balance */
}
}
@media only screen and (min-width: 600px)  {
section.novoe {
columns: 2; /* выстроить в 2 колонки */
column-fill:auto; /* еще есть значение balance */
}
}
@media (min-width: 768px) {
section.novoe {
columns: 2; /* выстроить в 2 колонки */
column-fill:auto; /* еще есть значение balance */
}

}
@media (min-width: 992px) {
section.novoe {
columns: 2; /* выстроить в 1 колонку */
column-fill:auto; /* еще есть значение balance */
}

}
@media (min-width: 1200px) {
section.novoe {
columns: 3; /* выстроить в 1 колонку */
column-fill:auto; /* еще есть значение balance */
}
}

div {
display: inline-block;
position: relative;
width: 100%; /* Важный момент - задай ширину !*/

margin-bottom: 15px;
background: #fff;
padding-bottom: 5px;

border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-khtml-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
/*box-shadow: 2px 2px 4px 0 #ccc;*/

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 10px rgba(0, 0, 0, 0.06) inset;
}

/* тени на нижних углах основания артикула */
div:before, div:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
border: solid 1px #fff222;
bottom: 12px;
width: 70%;
max-width: 80px; /* avoid rotation causing ugly appearance at large container widths */
height: 55%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
transform: skew(-13deg) rotate(-13deg);                 
}
/* тоже тени*/
div:after {
left: auto;
right: 10px;
transform: skew(13deg) rotate(13deg);                 
}

Основная фича в том, что совсем не нужно указывать классы bootstrap, как-бы деля пространство и формируя колонки внутри зоны сеткой.

<section class="novoe">
<div>
<img src="" alt="" />
</div>

<div>
<img src="" alt="" />
</div>

<div>
<img src="" alt="" />
</div>

<div>
<img src="" alt="" />
</div>
</section>