Сетка начальной загрузки с разной высотой изображения

Я работаю над динамической сеткой обложек альбомов с CSS и Bootstrap 3, и все работает отлично, когда все изображения масштабируются 1: 1. Но когда происходит изображение, которое не масштабируется таким образом, моя сетка разрывается. Вот скриншот моей проблемы:

Скриншот

Но то, что я хочу, это

Код для создания сетки выглядит следующим образом:

<div class="row">
    <div class="col-md-6 panel panel-default" v-for="result in results">
        <img src="{{ result.art }}" />
        <strong>{{ result.title }}</strong>
        <br />
        from <strong>{{ result.album }}</strong>
        <br />
        by <strong>{{ result.artist }}</strong>
    </div>
</div>

Я использую Vue.js для этого шаблона.

Поэтому я не могу поместить два таких столбца col-md-6 в один ряд, но когда я цепью столбцов, сетка разрушается

Есть ли способ получить правильную сетку с такими изображениями? Мне не нужно что-то вроде стиля каменной кладки, просто обычная стартовая сетка.

Спасибо за вашу помощь! :)

Ответы на вопрос(2)

Ваш ответ на вопрос