I need to implement different layouts for wide/mobile screens. Here is requirements:
Wide layout:

• #1 element has stretch-width but 50% of #1+#2 (in a row with #2) (height may be lower or bigger than #2)
• #2 element should be 50% width but max-width: 385px
• #3 should be the same width as #1

For mobile it should be simple column in order 1-2-3 (100% width)

Here is wide layout sample:

Mobile layout:

It looks easy to implement wide layout by grouping #1 and #3 in one column and #2 in second using flex, but for mobile these 3 elements should be all separate for placing #3 below #2

I understand it’s possible to implement by rendering #2 element inside or outside #1, but is it possible to make it in other way? Using css/flex or by changing html structure from css?

Here is my flexbox try, the #3 element should have the same width as #1 (and #1 can be higher or lower than #2 btw)
https://jsfiddle.net/v16wxmg7/1/

<div class="wrapper">
  <div class="c1">
    <div class="e1">
      1
    </div>
  </div>
  <div class="c2">
    <div class="e2">
      2
    </div>
  </div>
  <div class="c3">
    <div class="e3">
      3
    </div>
  </div>
</div>

.wrapper {
  background-color: #eee;
  display: flex;
  flex-flow: row wrap;
  div {
    height: 40px;
    color: white;
  }
  @media screen and (max-width: 500px) {
    flex-direction: column;
  }
}
.c1 {
  background-color: #900;
  flex: 4 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c2 {
  background-color: #090;
  flex: 4 1 50%;
  
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c3 {
  background-color: #009;
  max-width: 180px;
  flex: 0 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
    max-width: none;
  }
}

.e1 {
  min-width: 200px;
}
.e2 {
  min-width: 150px;
}
.e3 {
  width: 300px;
}