Bootstrap: Tamaño de columna entre -sm y -xs

No es la primera vez que me pasa. Maquetando un portal responsive con contenido modular he notado que necesitaba un tamaño intermedio entre el pequeño (sm – 768px) y el muy pequeño (xs – 480px).

La situación es esta: en XS normalmente el contenido se mostrará en una columna, pero SM es demasiado grande para mostrar sólo una, así que muestra 2. El problema es que el salto de SM a XS se hace a los 768px y es demasiado grande para empezar a mostrar una sóla columna.

Precisamente hoy el equipo de Bootstrap preguntaba qué nos gustaría ver su próxima versión y les he sugerido este tamaño intermedio.

Luego me he puesto a buscar, y he visto que no era sólo cosa mía y que más gente necesitaba este tamaño de columna. Incluso tiene nombre: MS. Resulta que es un tamaño ya propuesto, bastante debatido y que finalmente se ha rechazado.

Para usarlo sólo hay que agregar el archivo css que han preparado, e incluirlo en el html mediante <link> o en el css con @import.

[bs_button size=»lg» type=»primary» value=»Descargar bootstrap_ms.css» href=»https://gist.github.com/firepol/7942411″]

El uso sería el mísmo que siempre, por ejemplo:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-6 col-ms-6 col-xs-12">
   ...
   </div>
</div>