html — сетка начальной загрузки с переполнением стека

Я делаю тему для своего сайта Omeka, в которой я вызываю элемент и его различные компоненты, используя PHP. Каждый элемент находится в отдельном элементе div, и я попытался создать решетку в виде плитки с помощью Bootstrap. Тем не менее, элементы div располагаются только в одном вертикальном столбце. Как сделать так, чтобы все дивы выстраивались в ряд по три или четыре? Я полностью в тупике. Он прекрасно работает без PHP (с несколькими строками и добавленным вручную содержимым), но не будет работать иначе. Вот как это выглядит прямо сейчас. И вот как я хочу, чтобы div’ы выглядели так:

Вот HTML / PHP:

  <?php foreach (loop('items') as $item): ?>
<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">
Image:  <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('[email protected]') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</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;
}