How to make a layout using display: flex; so that one of the elements stretches over two lines

Question

It is necessary that all the elements are in a line and transferred if there is not enough space to a new line, but that one of the elements takes up two lines. This can be done using display: flex; or should i use a grid.

this is layout

Answer 1

.container{
  width:800px;
    height:600px;
  display:flex;
  flex-wrap:wrap;
}
.container > div{
  display:flex;
  flex-wrap:wrap;
}

.bdr{
  border:2px solid #000000;
}
.left{
  background:lightgreen;
  flex-basis:50%;
}
.right{
  background:skyblue;
  flex-basis:50%;
}
.bottom{
  background:orange;
  flex-basis:100%;
}

.left > .bdr{
  flex:1 48%;
}
.right > .bdr{
  flex:1;
}
.bottom > .bdr{
  flex: 1;
}
.bottom .c8{
  flex:2;
}

<div class="container">
  <div class="left">
    <div class="bdr c1"></div>
    <div class="bdr c2"></div>
    <div class="bdr c3"></div>
    <div class="bdr c4"></div>
  </div>
  <div class="right">
    <div class="bdr c5"></div>
  </div>
  <div class="bottom">
    <div class="bdr c6"></div>
    <div class="bdr c7"></div>
    <div class="bdr c8"></div>
  </div>  
</div>