Answers for "how to make a a two row and one column using flex"

how to make a a two row and one column using flex

.flag{
    position:relative;
    display:flex;
    flex-flow:column wrap;
    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%;}

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