Flex direction column but two of the children next to each other with different order for desktop

Question

This is part of a responsive design in which the layout is flex-direction: row for desktop and it has to be flex-direction: column for mobile. BUT, the two elements one and three have to be next to each other instead of on top of each other. (you can't put them in a container separately as that will break the desktop layout).

Is there any way to achieve this with Flexbox?

.flex-container-desktop {
  display: flex;
  flex-direction: row;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.child {
  border: 1px solid red;
  margin-right: 10px;
  padding: 5px;
}

.two {
  order: 1;
}

.three {
  order: 2;
}

.one {
  order: 3;
}

<b>Desktop</b>
<div class="flex-container-desktop">
  <div class="child one-desktop">
Child 1
  </div>
  <div class="child two-desktop">
Child 2
  </div>
  <div class="child three-desktop">
Child 3
  </div>
</div>
<hr>
<b>Mobile</b>
<div class="flex-container">
  <div class="child one">
Child 1
  </div>
  <div class="child two">
Child 2
  </div>
  <div class="child three">
Child 3
  </div>
</div>

<br>
Child 3 and 1 should be next to each other only on mobile.

Answer 1

You can do this with flex-direction: row and media queries. So when its mobile view you change order and make first element take full width with flex: 0 0 100% and two other elements 50%. Also its important to set flex-wrap: wrap so two other elements go to next row.

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.child {
  border: 1px solid;
  flex: 1;
  padding: 5px;
}
@media(max-width: 768px) {
  .two {
    order: 1;
    flex: 0 0 100%;
  }
  .three {
    order: 2;
    flex: 0 0 50%;
  }
  .one {
    order: 3;
    flex: 0 0 50%;
  }
}

<div class="flex-container">
  <div class="child one">
    Child 1
  </div>
  <div class="child two">
    Child 2
  </div>
  <div class="child three">
    Child 3
  </div>
</div>