hola
etngo una tabla con 3 columnas que muestran nombre. en dispositivos pequeños tengo una columna pero en medianos quisiera tener dos columnas.
lo que he hecho es lo siguiente:
<div class="tabla">
<div class="columna">
<div>David</div>
<div>Federico</div>
...
</div>
<div class="columna">
<div>Fernando </div>
<div>Francisco </div>
...
</div>
<div class="columna">
<div>José Antonio </div>
<div>Jose Bernardo </div>
<div> Rafa </div>
...
</div>
.columna {
width: 30%;
float: left;
}
--> eso se muestra con un max-width de más de 940px
con uno menor
.columna {
width: 100%;
float: left;
}
la cuestión es como hago para que se hagan dos columnas o tres o una columna segun el max-witdh? Tengo que definir un class=columna2? y ponerlo entre medias? No sé hará un lio con los cierres de los div porque
<div class="tabla">
<div class="columna">
<div class="columna2">
<div>David</div>
<div>Federico</div>
...
</div>
<div class="columna">
<div>Fernando </div>
</div> --> Cierra la columna y es o no lo quiero yo...
<div class="columna2">
<div>Francisco </div>
...
</div> --> Cierra columna2 y eso no l o quiero yo?
<div class="columna">
<div>José Antonio </div>
<div>Jose Bernardo </div>
<div> Rafa </div>
...</div>--> cierra la primra columna2
</div>