Usamos Bootstrap con la configuración predeterminada (es decir, 12 columnas usando un contenedor fijo y medianeras de 30 px entre las columnas). También usamos puntos de ruptura predeterminados. Quiero darles a mis diseñadores de software cuadrículas que puedan usar para diferentes tamaños de dispositivos y, dado que estamos usando los puntos de interrupción predeterminados de Bootstrap, tenemos cuatro tamaños: >=1200px, >=992px, >=768px y <768px. Para el tamaño más pequeño, estoy basando los diseños en un ancho de 320 px (iPhone5).
Claramente, una vez que llegamos a 768px, los valores predeterminados de Bootstrap ya no funcionan como cuadrículas de diseño, pero no estoy seguro de con qué reemplazarlos. La cuadrícula que elija debe ser un factor de 12, de modo que cada columna de la cuadrícula pueda estar compuesta por varias columnas de Bootstrap. Estoy pensando en usar una cuadrícula de 4 columnas para 768 px y 2 columnas para 320 px, pero agradecería cualquier sugerencia de mejores prácticas.
No existe una regla estricta o "mejor número" para la cantidad de columnas utilizadas en un diseño para pantallas pequeñas como la pantalla de 320 px que menciona.
Por lo general, se utilizan 1 o 2 columnas para este ancho, ya que mantiene las cosas legibles y se puede hacer clic en ellas, pero depende completamente del diseño y el contenido de cada sección en cuanto a la cantidad de columnas a utilizar. Incluso puede variar de una sección a otra si es necesario, lo cual es muy común.
Aunque no hay restricción
La mayoría de las 4 columnas se utilizan para un sistema de respuesta móvil.
Varía de un dispositivo a otro. Para una mejor comprensión, puede utilizar este enlace .
Zach Saucier
Martín K.