CSS flex-direction: row-reverse Ruins wrapping

so basically I have this form which is the Benin flag as you can see.

What i want to achieve is the exact same copy but mirrored, the green on the right with yellow on top of blue, but when i use reverse-row, the red falls off under the green instead.

here is the normal example
enter image description here

Here is the code:

.flag{
   position:relative;
   display:flex;
   flex-flow:column wrap;
   width:200px;
   height:150px;
   border:2px solid black;
}

>! flex-direction= row-reverse;

.green{background:green;}
.yellow{background:yellow;}
.red{background:red;}

.col1{width:40%;height:100%;}
.col2{width:60%;height:50%;}

<div class=flag>
 <div class='col1 green'></div>
 <div class='col2 yellow'></div>
 <div class='col2 red'></div>
</div>

What row-reverse does in your example is it changes flex-direction from column to row-reverse, so it's no surprise that it's no longer in a column flow.

Use wrap-reverse instead, to reverse the column wrapping direction:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flag {
   position: relative;
   display: flex;
   flex-flow: column wrap-reverse;
   width: 200px;
   height: 150px;
   border: 2px solid black;
}

.green {background: green;}
.yellow {background: yellow;}
.red {background: red;}

.col1 {width: 40%; height: 100%;}
.col2 {width: 60%; height: 50%;}

<!-- language: lang-html -->

<div class='flag'>
 <div class='col1 green'></div>
 <div class='col2 yellow'></div>
 <div class='col2 red'></div>
</div>

<!-- end snippet -->