CSS Flexbox right align responsive
<p>There is one CSS flexbox problem I'm trying to solve: right alignment of boxes.</p>

<p>So.. I have 4 divs in row. Two of them needs to be aligned left, and the rest needs to be on the right side. I know how to do this and this is not a problem (<code>margin-left: auto</code> on 3rd).</p>

<p>But they have property <code>flex-wrap: wrap</code> because I want them to wrap on small screens. I want 3rd and 4th div to be on the right side on every screen size. I can add <code>margin-left: auto</code> on 4th and it will create unwanted space between 3rd and 4th div, but it works for small screen (3rd and 4th stays on right).</p>

<p>I don't want to use media queries because divs width is dynamic...</p>

<p>Is there any nice solution for that? I don't want to give op on flexbox here!</p>

<p>Here is codepen: <a href="http://codepen.io/djkantoci/pen/XNxLVK" rel="nofollow noreferrer">http://codepen.io/djkantoci/pen/XNxLVK</a></p>

<p>Red is with <code>margin-left: auto</code>, blue is without:
<a href="https://i.stack.imgur.com/T1Wlr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T1Wlr.png" alt="Red is with margin-left: auto, blue is without"></a></p>