CSS Flexbox right align responsive

Question

There is one CSS flexbox problem I'm trying to solve: right alignment of boxes.

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 (margin-left: auto on 3rd).

But they have property flex-wrap: wrap 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 margin-left: auto 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).

I don't want to use media queries because divs width is dynamic...

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

Here is codepen: http://codepen.io/djkantoci/pen/XNxLVK

Red is with margin-left: auto, blue is without:

Answer 1

Here, added justify-content: flex-end and margin-right: auto to .f2 element:

.flex {
  align-items: center;
  background: #ddd;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 5px;
}
.flex.small {
  width: 500px;
}

.f {
  background: #333;
  color: #fff;
  flex: 0 0 auto;
  margin: 5px;
  min-height: 40px;
  padding: 30px 50px;
  text-align: center
}
.f2 {
  margin-right: auto
}
.f3 {
  flex-basis: 300px;  
}

<div class="flex">
  <div class="f f1">1</div>
  <div class="f f2">2</div>
  <div class="f f3">3</div>
  <div class="f f4">4</div>
</div>

<div class="flex small">
  <div class="f f1">1</div>
  <div class="f f2">2</div>
  <div class="f f3">3</div>
  <div class="f f4">4</div>
</div>

OK?