Contamos con tu apoyo para difundir nuestros posts en referencia a las ciencias informáticas.
Solución:
Supongamos que nuestra pantalla está dividida en 12 columnas
Él xs la parte se ocupa cuando la pantalla es muy pequeña. Del mismo modo, las clases pequeñas, medianas y grandes también se basan en su respectiva definición de tamaño de pantalla en CSS.
El ejemplo que proporcionaste:
Por nuestro bien, supongamos que estas tres columnas se nombran como col-1, col-2 y col-3
En una pantalla extra pequeña:
col-1 ocupa las 12 columnas y el resto dos de ellas ocupan 6 cada una (en una nueva fila)
En pantallas pequeñas
col-1 y col-3 ocupa 3, mientras que el del medio col-2 toma 6
Similarmente
Pantallas medianas
pantallas grandes
PD Las imágenes son capturas de pantalla del enlace que proporcionó (cambiando el tamaño del navegador para cada tamaño de pantalla)
React Flexbox Grid se puede utilizar para hacer que su sitio web responda. Se deriva del sistema de cuadrícula seguido de Bootstrap.
El sistema de cuadrícula divide la pantalla en 12 columnas y puede mencionar cuánto ancho se puede tomar para los componentes en dispositivos móviles, tabletas y computadoras de escritorio. Los puntos de ruptura para xs, sm, md, lg y xl son 576px, 768px, 992px y 1200px.
Puede ver la diferencia cambiando el tamaño de la ventana del navegador de la página https://roylee0704.github.io/react-flexbox-grid/
Es lo mismo que la siguiente consulta de medios
// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) ...
// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) ...
// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) ...
// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) ...
Recuerda que tienes la capacidad de decir si acertaste tu apuro en el momento verdadero.