Na `div` pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria `flex-direction: row | row-reverse | column | column-reverse;`. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria `flex-wrap: nowrap | wrap | wrap-reverse;`. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a `flex-flow`, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar. Você pode ver [funcionando no CodePen][1].

Um link bem legal para ter como referência é o do [CSS-Tricks][2], nele contém uma explicação detalhada de propriedades do flexbox.


  [1]: https://codepen.io/victorjordan95/pen/YLGYMM
  [2]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/