title: Position floated elements directly under each other
body: <p>I would like to display a row of tow divs next to each other while in the next row, the next div sits directly under the last one. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/5H7qf.png" alt="enter image description here"></p>
  
  <p>Because the layout has to be built into an CMS, I can't put Box 1,3 and 2,4 in a separat div. Is there a way to achieve this kind of behavior without extra wrapping elements? (Normal float behavior doesn't work, display inline/inline-block also doesn't do the trick.) Or is some JavaScript required to build a layout like this?</p>