Tu código tiene muchos detalles, te los iré comentando: Para solucionar el problema inicial puedes plantearlo de esta forma: * Engloba a tus 3 div dentro de un contenedor principal * En este punto los 3 div quedan uno sobre el otro por ser [elementos en bloque](https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements), con eso obtienes de forma *inicial* el resultado que esperas * Ahora si quieres que cuando sean mas de 400px los div pasen de elementos uno encima del otro a elementos uno a lado del otro, puedes establecer esta *media query* y trabajarlo por medio de *CSS Grid* @media screen and (min-width: 401px) { .columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } } Por otro lado, si observas: * Todos los textos dentro de los div ocupan un renglón único, dado eso en lugar de usar un span y tener que darle un salto de línea con un br, mejor usa una [etiqueta p](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/p) y así obtendrás el mismo resultado Finalmente yo dejaría solo a nivel de CSS el [grueso o peso de la letra](https://developer.mozilla.org/es/docs/Web/CSS/font-weight) para no depender directamente de una etiqueta HTML como lo es `strong` (*salvo que tengas de forma explícita algún requerimiento que la solicite*) Entonces propongo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <style> * { font-size: 14px; } .columnas-column { background-color:#aaa; margin: 10px; padding: 10px; } .columnas-column_titulo-principal { color: #029c95; font-weight: bold; line-height: 1.5; } @media screen and (min-width: 401px) { .columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } } </style> <div class="columnas"> <div class="columnas-column"> <p class="columnas-column_titulo-principal"> Dirección </p> <p class="columnas-column_texto"> Cra 5 # 71-45. Local 201 </p> <p class="columnas-column_texto"> Edificio La Strada </p> <p class="columnas-column_texto"> Barrio Rosales </p> </div> <div class="columnas-column"> <p class="columnas-column_titulo-principal"> Celular </p> <p class="columnas-column_texto"> (031) 649 1116 </p> <p class="columnas-column_texto"> (300) 256 9458 </p> <p class="columnas-column_titulo-principal"> Correo </p> <p class="columnas-column_texto"> [email protected] </p> </div> <div class="columnas-column"> <p class="columnas-column_titulo-principal"> Horario </p> <p class="columnas-column_texto"> Lunes a Viernes </p> <p class="columnas-column_texto"> Sábados </p> <p class="columnas-column_texto"> Domingos y Festivos </p> </div> </div> <!-- end snippet --> **Enlaces de interés y referencias** * [CSS Grid Layout](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout) * [BEM Methodology](https://en.bem.info/methodology/quick-start/)