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
Hacer lo anterior, generará que los 3 div queden uno sobre el otro por ser elementos en bloque, 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
@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 y así obtendrás el mismo resultado
Finalmente yo dejaría solo a nivel de CSS el grueso o peso de la letra 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:
<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>
Enlaces de interés y referencias