title: Another irregular image gallery with Bootstrap
body: <p>I have problem with irregular image gallery based on Bootstrap.
  <a href="http://alkoholeregionalne.pl/galeria11.jpg" rel="nofollow noreferrer">Here&#39;s the design. http://alkoholeregionalne.pl/galeria11.jpg</a></p>
  
  <p>I'm trying to set the red image's height equal with the height of the two rows of small yellow images, but when the width of the screen changes, the height's will shrink or grow unevenly. </p>
  
  <p>I think it could be connected to the dimensions of each image. </p>
  
  <p>Should I count it? I mean like "a" and "b" for red and "c" and "d" for yellow.</p>
  
  <p>How can I make the the heights match like in the image?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;img src="red.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;img src="yellow.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;img src="yellow.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;img src="yellow.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>NEW: I added on my first fiddle: <a href="https://jsfiddle.net/marcwars/tvy8u7vv/" rel="nofollow noreferrer">here</a></p>
  
  <p>On fiddle you've got to get larger left down window to see results for md/lg screen.</p>