Los breakpoints es describir el comportamiento en cada resolucion en responsive
Ejercicio anterior
Aqui tenemos 1 contenedor con 1 fila con 4 columnas donde tienen texto Lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Para hacerlo responsive agregamos mas clases en cada columna
lo vamos a hacer responsivo para: que cuando este con pantallas:
Extra langa col-xl mayor igual a 1200px ocupen 1 fila
langa col-lg mayor igual a 992px ocupen 1 filas
mediana col-md mayor igual a 768px ocupen 3 filas
pequeña col-sm mayor igual a 576px ocupen 6 filas
super pequeña col menor igual a 576px ocupen 6 filas
Columna 1: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 2: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 3: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 4: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 5: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 6: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Extra Extra langa col-xxl mayor igual a 1400px ocupen 1 sola fila
Extra langa col-xl mayor igual a 1200px ocupen 2 filas
langa col-lg mayor igual a 992px ocupen 4 filas
mediana col-md mayor igual a 768px ocupen 6 filas
pequeña col-sm mayor igual a 576px ocupen 12 filas
super pequeña col menor igual a 576px ocupen 12 filas
Columna 1: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 2: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 3: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 4: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 5: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 6: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 7: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 8: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 9: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 10: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 11: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Columna 12: Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.