title: Divide flex column into two rows
body: <p>I've the following columns (Fiddle: <a href="https://jsfiddle.net/DTcHh/15420/embedded/result/" rel="nofollow noreferrer">https://jsfiddle.net/DTcHh/15420/embedded/result/</a>)
  <a href="https://i.stack.imgur.com/Uvi0g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uvi0g.png" alt="Layout"></a></p>
  
  <p>The column's same height is achieved with <code>flex</code>:</p>
  
  <pre><code>@media (min-width: 992px) {
         .columns-equal {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
      }
  }
  </code></pre>
  
  <p>(media used to keep responsiveness)</p>
  
  <p>How can can I divide second column into two rows that fill whole column? e.g.:
  <a href="https://i.stack.imgur.com/E5l3Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5l3Q.png" alt="Desired"></a></p>
  
  <p>(I want to make row's content centered)</p>
  
  <p>Is <code>flex</code> good approach? I believe I can use table-display, but it brokes the responsiveness. </p>