Acá está cómo se vé tu código:
https://jsfiddle.net/uLqjjem7/1/
Como puedes ver el acomodo se descuadra bastante cuando el tamaño dispnible es imitado.
La premisa es semejante al concepto TR de una tabla.
Prepara lo que va en una fila, en una sección, y luego el comportamiento de los hijos que viven en esa sección.
Una vez que defines este comportamiento, lo aplicas a varias secciones:
Explora la propiedad flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/