title: Explode middle item in flexbox layout
body: <p>I have a small screen layout stacked:</p>
  
  <pre><code>[Title Block]
  [Image]
  [Content Block]
  </code></pre>
  
  <p>But on larger screens I wish to have this layout:</p>
  
  <pre><code>[Title Block]   [Image]
  [Content Block]
  </code></pre>
  
  <p>The image is rather tall, and the content block should sit directly below the title block.</p>
  
  <p>I've tried using flex:</p>
  
  <pre><code>.container {
      display: flex;
      flex-wrap: wrap;
  }
  
  .title-block {
      width: 50%;
  }
  
  .image {
      width: 50%;
  }
  
  .content-block {
      width: 50%;
  }
  </code></pre>
  
  <p>But there is a gap between the title block and the content block.</p>
  
  <p>How can I produce this layout - is it possible with flex?</p>
  
  <p><a href="https://jsfiddle.net/tjL27c8r/" rel="nofollow noreferrer">https://jsfiddle.net/tjL27c8r/</a></p>