Bootstrap grid with different image heights
<p>I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:</p>

<p><a href="http://i.stack.imgur.com/DogkO.jpg" rel="nofollow">Screenshot</a></p>

<p><a href="http://i.stack.imgur.com/pZcSQ.jpg" rel="nofollow">But what I want is</a></p>

<p>The code to generate the grid looks like this:</p>

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

<p>I'm using Vue.js for this template.</p>

<p>So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.</p>

<p>Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.</p>

<p>Thanks for your help! :)</p>