Flexbox: Two elements on top of each other in flex-direction: row : <p>I am trying to achieve the following:</p>

<p><img src="https://i.stack.imgur.com/5qoEy.jpg" alt=""></p>

<hr>

<p>My first attempt was to use a helper div (green):</p>

<p><img src="https://i.stack.imgur.com/BTKTg.jpg" alt=""></p>

<p><a href="https://jsfiddle.net/89z21rq3/7/" rel="noreferrer">JSFiddle</a></p>

<p>What I could do here, is using JavaScript to move the puple and orange elements out of the helper on mobile screens. <strong>But there has to be a plain css way.</strong></p>

<hr>

<p>My second attempt was to remove the helper and build the Mobile Layout:</p>

<p><img src="https://i.stack.imgur.com/U4iwQ.jpg" alt=""></p>

<p><a href="https://jsfiddle.net/umq3L2wL/1/" rel="noreferrer">JSFiddle</a></p>

<hr>

<p>Is there a way to place two elements on top of each other in <code>flex-direction: row</code>? (<a href="https://jsfiddle.net/umq3L2wL/1/" rel="noreferrer">second attempt</a>)</p>
