Me pregunto cómo puedo ordenar mis divs basándome en puntos de interrupción móviles y de escritorio. Tengo:
<div> <span> foo </span> <span> bar </span> <span> baz </span> </div>Me gustaría llegar a un resultado en el que:
solo en el punto de interrupción móvil firstspan y secondspan están en la misma línea, por lo que:
foobar bazy solo en el punto de interrupción del escritorio, el segundo y el tercer intervalo están en la misma línea, por lo que:
foo barbazUsualmente uso Tailwind (pero creo que esta información es irrelevante), probé con flex, break-line pero nada, no entiendo cómo crear este código.
Para lograr esto usando tailwindCSS, puede usar grid y hacer que col-span responda .
En el siguiente ejemplo, el primer tramo y el segundo tramo están en la primera línea hasta el punto de interrupción pequeño, y para una pantalla más grande que la pequeña, el primer tramo está solo en su línea y el segundo tramo y el tercer tramo están en la misma línea.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="grid grid-cols-2"> <div class="sm:col-span-2">First span</div> <div>Second span</div> <div>Third span</div> </div>Editado después del comentario de @davide
Para tener los elementos en la misma línea, la solución más fácil sería repetir el intervalo de segundos dos veces y usar puntos de responsive breakpoints con clases de display para ocultarlo o mostrarlo según el tamaño de la pantalla.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div> <span>First span</span> <span class="sm:hidden">Second span</span> </div> <div> <span class="hidden sm:inline">Second span</span> <span>Third span</span> </div>