Fundação: grade pequena vs. grade grande

Os documentos básicos sugerem o uso de “colunas x pequenas” quando a grade da tela pequena e da tela grande é a mesma.

O problema é que isso pode realmente quebrar o layout em telas pequenas, por exemplo, quando você coloca um botão em uma coluna pequena, como este:

Se você quiser ver esse problema em ação, abra este violino e redimensione a janela do navegador para ficar o mais estreita possível e você verá esse problema.

A solução para isso é tão fácil quanto mudar para “colunas com x grandes”, como neste violino .