Adaptar a las pantallas

Retomas una página cuya visualización en móvil está rota. El código parece bastante explícito: <div class="lg:flex md:flex-col sm:hidden">. Reduces la ventana y el comportamiento no tiene ningún sentido: el elemento desaparece en tableta, reaparece en teléfono y el paso a columna nunca se produce. Añades un sm:block, que arregla un caso y rompe otros dos. Al cabo de una hora, tienes siete prefijos apilados y pruebas al azar.

Toda la confusión se debe a un malentendido sobre una palabra. md: no significa «en pantalla mediana», sino «a partir de 768 píxeles en adelante». Son umbrales de anchura mínima, no tramos. Así, sm:hidden no oculta el elemento en las pantallas pequeñas: lo oculta a partir de 640 píxeles, es decir, en todas las pantallas salvo las pequeñas. Una vez admitido esto, la escritura se vuelve mecánica y no vuelves a apilar siete prefijos.

Los umbrales y lo que significan