Categorias: CSS

Alterar ordem das colunas no celular e tablet

Escrito por Amanda de Lavra

22 de agosto de 2021

Muitas vezes, a disposição do conteúdo no desktop não funciona bem no celular e no tablet. Nesse exemplo, o texto vem primeiro na coluna da esquerda e a foto na coluna da direita. Na versão responsiva, o texto viria em cima e a foto embaixo, mas queria que a foto viesse primeiro, então é necessário alterar a ordem das colunas.

Para isso, primeiro é necessário ir na linha, aba Avançado > Customize CSS > Elemento Principal e adicionar:

display: flex;
flex-wrap: wrap;

Após, é necessário ir em cada coluna em aba Avançado > Customize CSS > Elemento Principal, selecionar o botão de responsividade e em tablet alterar a ordem da coluna, colocando 1 para a que deve vir primeiro, 2 para a seguinte e assim por diante, dependendo de quantas colunas tiver.

order: 1;

Caso seja necessário alterar a ordem da coluna em mais de uma linha, é melhor criar classes. Mais sobre o assunto em: https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices.

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....