html – Como posicionar divs de diferentes alturas uma em baixo da outra?

Tenho quatro divs, as três primeiras divs preciso que fique na primeira linha, e a quarta div logo onde finaliza a primeira div, porém, quando uso display: flex para manter as três primeiras divs na mesma linha, a quarta div inicia após a altura do maior elemento flex:

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>

O resultado que eu gostaria de ter:

Há alguma forma de manter a minha quarta divlogo onde finalizar a primeira div?

inserir a descrição da imagem aqui