Tenemos una tabla formada por varias imágenes, queremos que las imágenes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tamaño no queremos que se reduzcan mas,sino que salten de linea:
La tabla podría ser:
Tal y como está sin css el resultado seria:
![responsive1](https://www.josejavierfm.es/blog/wp-content/uploads/2015/10/responsive1-300x201.jpg)
Ahora añadimos el css para hacerlo responsive:
#opcionesinicio{
width:100%
}
.img-responsive {
max-width: 100%;
width: auto;
}
Y el resultado es:
![responsive2](https://www.josejavierfm.es/blog/wp-content/uploads/2015/10/responsive2-300x45.jpg)
Pero si la pantalla es muy pequeña las imagenes apenas se ven.
![responsive3](https://www.josejavierfm.es/blog/wp-content/uploads/2015/10/responsive3-300x53.jpg)
Aqui es donde añadimos el codigo para que a partir de un tamaño la tabla se rompa
@media screen and (max-width:500px){
#opcionesinicio td{
float:left;
}
}
![responsive4](https://www.josejavierfm.es/blog/wp-content/uploads/2015/10/responsive4-227x300.jpg)
El resultado completo se puede ver en:
https://jsfiddle.net/18ko3yu8/