HTML — Создание квадратной адаптивной сетки с начальной загрузкой и переполнением стека

Я пытаюсь создать квадратную сетку с помощью Bootstrap и PHP для моей темы Omeka. Я пытался сделать решетку, похожую на плитку, с 3 или 4 элементами в четном ряду, как в этот пример. Тем не менее, когда я попробовал это в своем собственном коде, он просто по умолчанию один столбец. Я попробовал несколько вариантов класса, и ничего, кажется, не работает.

Вот HTML-код:

    <div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Title:
<br> Description
<br> Another category
<br>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Title:
<br> Description
<br> Another category
<br>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Title:
<br> Description
<br> Another category
<br>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Title:
<br> Description
<br> Another category
<br>
</div>
</div>
</div>
</div>
</div>
<!-- end grid -->

и CSS:

.dummy {
margin-top: 100%;
}

.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align: center;
padding-top: calc(50% - 30px);
}

.item-item {
border: solid black 5px;
}

Вот JS Fiddle. Как я могу превратить это в сетку с четными столбцами и строками?