title: bootstrap 4 row height
body: <p>I try to have something like this with bootstrap 4<a href="https://i.stack.imgur.com/sF9pd.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/sF9pd.jpg" alt="enter image description here"></a></p>
  
  <p>with equal size in the height of green rows and red row</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/&gt;
     &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-8 col-lg-6 B"&gt;&lt;div class="card card-inverse" style="background-color: #333; border-color: #333;"&gt;
      &lt;img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"&gt;
      
      &lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4 col-lg-3 G"&gt;
            &lt;div class="row"&gt;
            &lt;div class="col-md-6 col-lg-6 B"&gt;&lt;div class="card card-inverse" style="background-color: #333; border-color: #333;"&gt;
      &lt;img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"&gt;
      
      &lt;/div&gt;&lt;/div&gt;
         &lt;div class="col-md-6 col-lg-6 B"&gt;&lt;div class="card card-inverse" style="background-color: #333; border-color: #333;"&gt;
      &lt;img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"&gt;
      
      &lt;/div&gt;&lt;/div&gt;
         &lt;div class="col-md-12"&gt;&lt;div class="card card-inverse" style="background-color: #333; border-color: #333;"&gt;
      &lt;img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image"&gt;
      
      &lt;/div&gt;&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;   
         
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  All images have the same size and are responsive
  but the problem is I can't get equal size in the height of green rows and red row</p>