Adaptar aos tamanhos de tela

Você pega uma página cuja exibição no mobile está quebrada. O código parece bem explícito: <div class="lg:flex md:flex-col sm:hidden">. Você reduz a janela e o comportamento não faz sentido — o elemento some no tablet, reaparece no celular, e a mudança para coluna nunca acontece. Você adiciona um sm:block, que resolve um caso e quebra outros dois. Depois de uma hora, são sete prefixos empilhados e você testa no chute.

Toda a confusão vem de um mal-entendido sobre uma palavra. md: não significa "em tela média", mas "a partir de 768 pixels, inclusive acima". São limites de largura mínima, não faixas. Portanto, sm:hidden não esconde o elemento em telas pequenas: ele o esconde a partir de 640 pixels, ou seja, em todas as telas exceto as pequenas. Uma vez aceito esse ponto, a escrita se torna mecânica e você nunca mais empilha sete prefixos.

Os limites e o que eles significam