title: Responsive images with different sizes on same level
body: <p>Hello i would like to get same row size of images as it is on example, but you can see that when you change size of window, bigger images are smaller than columns on left.
  I am fighting with it for a long time, and still didnt found solution. I need to have it with overlay text. So this is another problem. Thank you for any sugestions
  <a href="http://jsfiddle.net/sLk0jf4L/264/" rel="nofollow">http://jsfiddle.net/sLk0jf4L/264/</a></p>
  
  <pre><code>&lt;div class="row" data-equalizer&gt;
  &lt;div class="small-3 columns col-left" data-equalizer-watch&gt;
      &lt;div class="row"&gt;
          &lt;div class="small-12 columns"&gt;
              &lt;img src="http://placehold.it/600x300" /&gt; 
              &lt;img src="http://placehold.it/600x300" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="small-3 columns col-left" data-equalizer-watch&gt;
      &lt;div class="row"&gt;
          &lt;div class="small-12 columns"&gt;
              &lt;img src="http://placehold.it/600x300" /&gt; 
              &lt;img src="http://placehold.it/600x300" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="small-3 columns" data-equalizer-watch&gt;
       &lt;img src="http://placehold.it/600x645" /&gt; 
  &lt;/div&gt;
  &lt;div class="small-3 columns" data-equalizer-watch&gt;
   &lt;img src="http://placehold.it/600x645" /&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>