title: Four horizontally aligned divs split into two on smaller screen size
body: <p>Apologies if this has been answered before. </p>
  
  <p>I have four horizontally aligned divs, each containing an img and text. </p>
  
  <pre><code>box box box box
  </code></pre>
  
  <p>When I reduce the screen size, I want these to split down the middle, to give me:</p>
  
  <pre><code>box box
  box box
  </code></pre>
  
  <p>Instead of what I'm currently getting: </p>
  
  <pre><code>box box box
      box
  </code></pre>
  
  <p>Currently, when I reduce the screen size further, they do stack as 2x2, splitting to a vertical layout on very small screens (which they still need to do). </p>
  
  <p>js fiddle here: <a href="https://jsfiddle.net/zyrkstnk/" rel="nofollow noreferrer">https://jsfiddle.net/zyrkstnk/</a></p>
  
  <p>Any ideas? I've messed around with &amp;nbsp but can't get it to work. Thanks!</p>