Um sufixo só, o mesmo em grid, coluna e container — mobile-first de verdade.
O sistema de responsividade inteiro usa o MESMO sufixo de largura em qualquer classe de layout — aprende uma vez, usa em tudo.
Mobile-first real: a regra ATIVA a partir daquela largura pra cima, nunca abaixo — sem sufixo já vale no mobile.
(sem sufixo)0px — celular em pé, o padrão-pp380px — celular grande-p576px — celular deitado-m768px — tablet-g992px — notebook-gg1200px — desktop-xg1400px — tela grande<!-- o sufixo diz "a PARTIR desta largura", nunca "até" -->
<div class="l-2 l-4-g">…</div>
<!-- ↑ ↑
| a partir de 992px, 4 colunas
no celular já vale: 2 colunas -->Abaixo de 768px (-m), as grades .l-2 … .l-6 NÃO viram N colunas — cada filho ocupa a linha inteira. A grade só passa a valer do tablet pra cima.
Ou seja: l-4 não é "4 colunas sempre". É "1 por linha no celular, 4 a partir de 768px". Se você quer 2 colunas já no celular, o caminho é o span do filho: co6 (6 de 12 = metade).
<!-- l-4 = 1 por linha no celular, 4 colunas a partir de 768px -->
<div class="l l-4">…</div>
<!-- quer 2 colunas JÁ no celular? use o span do filho -->
<div class="l">
<div class="co6">metade</div>
<div class="co6">metade</div>
</div>l-4-g — 1 por linha no celular, 4 a partir de 992pxl-2-m l-3-g l-6-gg — 1 → 2 (768) → 3 (992) → 6 (1200)<!-- 1 por linha no celular; 4 colunas do notebook pra cima -->
<div class="l l-4-g">…</div>
<!-- empilhado no celular, 2 no tablet, 3 no notebook, 6 no desktop -->
<div class="l l-2-m l-3-g l-6-gg">…</div>l-1-2-m — empilha no celular; a partir de 768px vira 1fr / 2frl-2-1-p — a partir de 576px vira 2fr / 1fr (conteúdo + barra lateral)<div class="l l-1-2-m">…</div> <!-- 1fr / 2fr a partir de 768px -->
<div class="l l-2-1-p">…</div> <!-- 2fr / 1fr a partir de 576px -->co12 co6-m co3-g — o mesmo bloco ocupa 12/12, depois 6/12, depois 3/12co12 co3-g na lateral, co12 no conteúdo — some no celular, encaixa no notebook<!-- o sufixo funciona igual no span do filho -->
<div class="l">
<div class="co12 co6-m co3-g">A</div>
<div class="co12 co6-m co3-g">B</div>
</div>
<!-- ATENÇÃO: com breakpoint, o co existe só nos DIVISORES de 12:
co1 co2 co3 co4 co6 co12. Não existe co8-g, co5-m, co7-p… -->
<!-- sem breakpoint, aí sim vão de co1 a co12 -->
<div class="l">
<div class="co8">8 de 12</div>
<div class="co4">4 de 12</div>
</div>O sufixo é sempre "daqui pra cima". Então o jeito de fazer "diferente no celular" é: escreva o comportamento do celular sem sufixo, e corrija dali pra cima.
Ex.: l-1 l-3-m — no celular é 1 coluna (sem sufixo), e a partir do tablet passa a 3. Você nunca precisa de uma regra "só abaixo de 768".
<!-- CERTO — mobile-first: o padrão é o celular, o sufixo corrige pra cima -->
<div class="l l-1 l-3-m">…</div>
<!-- não existe (e não faz falta) algo como "l-3-ate-m" -->
<!-- vale pros dois lugares onde o sufixo existe: -->
<div class="l l-2 l-4-g">…</div> <!-- colunas da grade -->
<div class="co12 co6-m">…</div> <!-- quanto o filho ocupa -->Nenhum.
(nenhum sufixo)-pp-p-m-g-gg-xgNenhum.
Nenhum.
Nenhuma.
l-*) e de span do filho (co1…co12). Espaçamento, gap e tipografia usam a escala de TAMANHO (-pp -p -m -g -gg -xg) com os mesmos nomes, mas ali eles significam "quão grande", não "a partir de que largura".