Getting correct grid with Flexbox - css

Question

Can someone point me out how can I get a grid with Flexbox that is similar to the picture below. I have green column already done but have problem doing red section.
The problem is that I need to have an access to Flex Order just re-order it on mobile resolutions.
What I have already:
JSFiddle
HTML
* {
box-sizing: border-box;
}
main,
div {
display: flex;
padding: 1rem;
}
.desktop {
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 100%;
}
.desktop div {
flex: 1;
}
div.orange {
background-color: #FFAD77;
width: 30%;
flex: 0 0 50%;
}
div.yellow {
flex: 0 0 100%;
width: 40%;
background-color: #FFE377;
}
div.purple {
flex: 0 0 50%;
width: 30%;
background-color: #FF77C8;
}
div.green {
background-color: green;
width: 30%;
}
#media(max-width: 480px) {
.desktop div {
flex: 1;
width: 100%;
}
div.orange {
order: 1;
}
div.yellow {
order: 2;
}
div.purple {
order: 3;
}
div.green {
order: 2;
}
}
<div class="desktop">
<div class="yellow">lorem1</div>
<div class="orange">lorem2</div>
<div class="purple">lorem3</div>
<div class="green">lorem4</div>
</div>

Answer 1

Please adjust the width, remove border and other things are per your requirement.
.redouter {
height: 200px;
border: 1px solid green;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.red {
background: red;
width: 50%;
min-height: 20px;
text-align: center;
color: white;
font-size: 30px;
}
.one {
border: 2px solid white;
}
.two {
border: 5px solid white;
min-height: 150px;
}
.three {
min-height: 144px;
border: 3px solid white;
}
.four {
min-height: 10px;
border: 3px solid white;
}
#media(max-width: 480px) {
.redouter {
height: 100%;
}
.red {
flex: 1;
width: 100%;
}
.one {
order: 1;
}
.two {
order: 2;
}
.three {
order: 3;
}
.four {
order: 2;
}
}
.desktop {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
width: 100%;
}
.yellow,
.green,
.purple,
.orange {
flex: 1;
}
div.orange {
background-color: #FFAD77;
width: 30%;
flex: 0 0 50%;
}
div.yellow {
flex: 0 0 100%;
width: 40%;
background-color: #FFE377;
}
div.purple {
flex: 0 0 50%;
width: 30%;
background-color: #FF77C8;
}
div.green {
background-color: green;
width: 30%;
}
#media(max-width: 480px) {
.desktop div {
flex: 1;
width: 100%;
}
div[orange] {
order: -1;
flex: 2;
}
div[yellow] {
flex: 5;
}
div[purple] {
flex: 1;
}
div[purple] {
flex: 6;
}
}
<div class="desktop">
<div class="yellow">lorem 1</div>
<div class="orange">lorem 2</div>
<div class="purple">lorem 3</div>
<div class="green">lorem 4</div>
</div>
<div class="redouter">
<div class="red one">1</div>
<div class="red two">2</div>
<div class="red three">3</div>
<div class="red four">4</div>
</div>