How to position Ivs of different heights one below the other?

Question

I have four divs, the first three divs I need you to take the first line, and the fourth div just where the first div, however, when do I use display: flex to keep the first three divs on the same line, the fourth div starts after the height of the largest flex element:

body {
  margin: 0;
  height: 100vh;
  
  font-family: Helvetica neue, roboto;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: wrap;
}

.div-1 {
  background-color: purple;
  width: 30%;
  height: 30%;
}

.div-2 {
  background-color: red;
  width: 30%;
  height: 30%;
}

.div-3 {
  background-color: green;
  width: 30%;
  height: 80%
}

.div-4 {
  background-color: aquamarine;
  width: 30%;
  height: 80%;
}

<div class="container">
   <div class="div-1">
      conteudo div 1
   </div>
   <div class="div-2">
      conteudo div 2
   </div>
   <div class="div-3">
      conteudo div 3
   </div>
  
   <div class="div-4">
      conteudo div 4
   </div>
</div>

The result I wish I had:

Is there any way to keep my fourth divjust where to finish the first div?