No desktop, as colunas são apresentadas corretamente: texto à esquerda, imagem à direita. Abra o site num telemóvel e a imagem aparece primeiro, enquanto a explicação desliza para baixo, ficando abaixo do scroll.

Parece-lhe familiar? A razão é que, em dispositivos móveis, todo o layout colapsa numa única coluna e a ordem dos blocos permanece fixa: o que vier primeiro no HTML aparece no topo. Ninguém quer alterar o HTML apenas para o mobile: isso significa duplicar secções ou usar soluções improvisadas com display: none.

O CSS fornece uma ferramenta que resolve este problema sem modificar a marcação: a propriedade order combinada com flexbox. Uma linha numa media query e os blocos trocam de lugar.

💡 Visão geral rápida:

• Como o flexbox controla a ordem dos blocos sem alterar o HTML
• Código CSS para trocar duas colunas no mobile
• Como aplicar classes através de um page builder (usando o King Composer como exemplo)
• Um snippet pronto a usar: copie, substitua as suas classes, teste

Como funciona a ordem CSS: o essencial

O flexbox faz mais do que apenas alinhar elementos horizontal e verticalmente. Cada item flex tem uma propriedade numérica order que determina a sua posição visual independentemente do seu lugar no HTML.

Por predefinição, todos os elementos têm order: 0, pelo que aparecem na ordem em que estão escritos no código. Mas assim que atribui order: 1 a um bloco e order: 2 a outro, o navegador reorganiza-os. O número mais baixo aparece sempre primeiro.

A parte mais útil: order funciona dentro de uma media query. No desktop, os blocos mantêm as suas posições normais, mas em ecrãs com menos de 768px de largura, trocam de lugar. Entretanto, o HTML permanece intacto, os motores de busca veem a ordem original e a acessibilidade não é afetada. A MDN confirma: a ordem visual muda, mas a ordem de tabulação não (desde que não mexa no tabindex).

Note que order só funciona dentro de um contentor flex. O bloco pai tem de ter display: flex ou display: inline-flex. Sem isto, a propriedade order é ignorada.

Análise passo a passo: aplicar order na prática

Considere uma secção típica: duas colunas em linha no desktop, empilhadas no mobile. O objetivo: nos telemóveis, a segunda coluna (imagem) deve aparecer PRIMEIRO, e a primeira coluna (texto) deve aparecer em segundo.

Passo 1: preparar a estrutura HTML

A marcação básica consiste num contentor pai e dois blocos filhos. A ordem no HTML: texto primeiro, depois imagem. Esta é exatamente a estrutura que a maioria dos page builders gera, incluindo o King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Passo 2: escrever o CSS

Primeiro, torne o contentor num contentor flex em todas as resoluções. Depois, na media query para mobile, atribua a cada bloco o seu próprio order e estique-os para a largura total.

Adicione este código em Painel → Aparência → Personalizar → CSS Adicional no seu tema ou através do plugin Code Snippets. Não edite os ficheiros do tema diretamente, porque os seus estilos serão perdidos numa atualização.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Análise: no desktop, ambos os blocos são itens flex regulares com order: 0 (o valor predefinido de acordo com a especificação). Texto à esquerda, imagem à direita, como no HTML. Em ecrãs com menos de 768px de largura, a media query entra em ação: .block-image recebe order: 1, movendo-o para primeiro; .block-text recebe order: 2, colocando-o em segundo. width: 100% garante que os blocos ocupam toda a largura do ecrã horizontalmente.

Ponto-chave: as classes .block-text e .block-image são a sua própria nomenclatura. Num projeto real, irá segmentar as classes que o seu page builder ou tema gerar.

Passo 3: como atribuir classes num page builder

Abordagem universal: qualquer construtor visual (Elementor, Bricks, o legado King Composer, o nativo Gutenberg via grupo) permite adicionar uma classe CSS personalizada a secções e colunas. As capturas de ecrã abaixo mostram o processo na interface do King Composer, mas a lógica é a mesma em todo o lado: encontre o campo "Classe CSS" ou "Classe Extra" nas definições da linha/coluna e introduza o nome desejado.

Uma secção de duas colunas no King Composer tem este aspeto:

Atribua a classe section-wrapper ao contentor pai (a linha):

Atribua a classe block-text à coluna da esquerda:

Atribua a classe block-image à coluna da direita:

Depois de guardar e publicar, verifique a página num telemóvel ou através das DevTools do navegador (F12 → Alternar barra de ferramentas do dispositivo). Os blocos devem trocar de lugar: imagem no topo, texto abaixo.

Como adaptar este método ao seu projeto

Três cenários típicos e o que alterar no código:

Está a usar um page builder diferente. Encontre o campo de classe CSS personalizada nas definições da secção/coluna. No Elementor, é Avançado → Classes CSS; no Bricks, é Definições → CSS ID e Classes. Introduza os nomes das suas classes e atualize os seletores CSS em conformidade.

Está a codificar manualmente sem um page builder. Ainda mais fácil: escreva as classes necessárias diretamente na marcação HTML do seu template. O código CSS permanece o mesmo; apenas adapte os seletores à sua marcação.

Tem três ou mais blocos em vez de dois. Adicione uma regra para cada bloco na media query com o seu próprio valor de order. Por exemplo: .block-a { order: 1; }, .block-b { order: 2; } e .block-c { order: 3; }. Os números não precisam de ser consecutivos; pode usar order: 10 para garantir que move um elemento para o fim.

Certifique-se de que o contentor pai tem display: flex; sem isso, order é silenciosamente ignorado e perderá meia hora a depurar. O cenário mais comum: o contentor assume por defeito display: block, o flex é aplicado, mas é substituído por uma regra do tema mais específica. DevTools → Computed mostrar-lhe-á o valor final.

Veja este pequeno vídeo sobre o tópico, que demonstra claramente como order reorganiza os blocos em tempo real:

⁉️🤔 Perguntas frequentes

O order funciona em todos os navegadores?

order é suportado por todos os navegadores modernos desde 2015, incluindo Safari no iOS e Chrome no Android. De acordo com os dados do caniuse.com, o suporte global ao flexbox é de 99,2%. Se precisar de suporte para o IE11 (que entende flexbox, mas tem bugs), adicione -ms-flex-order com o mesmo valor.

O order prejudica a indexação nos motores de busca?

Não. Os rastreadores dos motores de busca leem o HTML fonte da página e order apenas altera a ordem visual no navegador. O Google confirma: os rearranjos de CSS não afetam o ranking. A ordem original do conteúdo no HTML permanece inalterada.

Porque é que o meu order não está a funcionar?

Três razões mais comuns: (1) o bloco pai não tem display: flex; (2) a media query é substituída por uma regra do tema mais específica; (3) o elemento filho tem um valor de display diferente de block (como inline). Continua a tornar-se um item flex, mas o comportamento pode diferir. Abra as DevTools, separador Elements → Computed: verifique se o seu order está aplicado e não está riscado.

Posso alterar a ordem usando CSS Grid em vez de flexbox?

Sim. O Grid tem uma propriedade order que funciona de forma idêntica. Além disso, o Grid oferece uma alternativa: pode definir grid-row e grid-column para posicionamento explícito de elementos sem order. Mas se tiver simplesmente uma linha de duas colunas, o flexbox é mais simples (menos código).

E se o meu page builder não permitir adicionar uma classe personalizada?

Alguns construtores mais antigos ou simplificados não mostram o campo Classe CSS. Nesse caso: (1) envolva a secção num grupo e atribua a classe ao grupo; (2) use o seletor CSS integrado do construtor (por exemplo, .kc-column-12a3b para o King Composer), que pode encontrar através das DevTools; (3) mude para o Gutenberg com um contentor de grupo, onde cada bloco tem um campo "Classe CSS Adicional" no painel direito.

Pontos-chave sobre a troca da ordem dos blocos

A propriedade CSS order é a forma mais fácil de controlar a sequência visual dos blocos sem editar o HTML. A flexibilidade é alcançada com três linhas numa media query: defina display: flex no contentor, atribua order: 1 e order: 2 aos blocos filhos no breakpoint móvel e está feito.

O caminho de implementação mais seguro: adicione CSS através de Aparência → Personalizar → CSS Adicional ou do plugin Code Snippets; não mexa nos ficheiros do tema. Antes de publicar, teste a página através das DevTools num emulador de iPhone e num dispositivo real. Se o order não estiver a funcionar, verifique primeiro o valor Computed de display do contentor.

Já experimentou este método no seu site? Partilhe nos comentários que page builder usou e o que trocou.