Changing stack order between different rows flexbox - html

Question

Goodmorning. I am trying to change the stacking order in a flexbox situation, where there are 2 columns, but the first column contains a spot where the second column needs to be put in between. So when on mobile I need them to be ordered different than source order.
This is on large
col 1 col 2
----------==============
[A] [C]
[B]
Where A and B are in one column, and C is in the other
But on small breakpoint, it needs to be
[A]
[C]
[B]
Is this possible using just Flexbox?
So to clarify. The HTML structure is as such:
row
column
divA
divB
column
divC
Codepen example
.a { background-color: green; }
.b { background-color: red; }
.c { background-color: blue; }
.row {
display: flex;
flex-direction: column;
}
.column {
flex: 1;
}
#media (min-width: 768px) {
.row {
flex-direction: row;
}
}
<div class="row">
<div class="column">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="column c">C</div>
</div>

Answer 1

Update
With original html and display: contents allows c to take full height without adding heights when in desktop. Also better solves original problem of how to change order of elements in two separate divs
.a {
background-color: green;
order: 1;
width: 100%;
}
.b {
background-color: red;
order: 3;
width: 100%;
}
.c {
background-color: blue;
order: 2;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; /* add this so you don't need the extra wrapper div */
}
.column {
width: 50%; /* start off width children being 50% width */
}
#media (max-width: 768px) {
.column {
width: 100%;
}
.column:first-child {
display: contents;
}
}
<div class="row">
<div class="column">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="column c">C</div>
</div>
Original Answer
You can achieve what you want with media queries and order:
.a {
background-color: green;
order: 1;
}
.b {
background-color: red;
order: 3;
}
.c {
background-color: blue;
order: 2;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; /* add this so you don't need the extra wrapper div */
}
.row>div {
width: 50%; /* start off width children being 50% width */
}
#media (max-width: 768px) {
.row>div {
/* for small screens */
width: 100%;
}
}
<div class="row">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>