Como alternar colunas no Elementor Mobile de maneira customizada

Como alternar colunas no Elementor

Sabe quando você tem 3 colunas no Elementor?

No Desktop a ordem delas é:

1 – 2 – 3

Nada de novidade, né?

Mas vamos supor que no mobile você precisa de ordens variadas:

2 – 3- 1 ou

1 – 3 – 2 ou

3 – 1 – 2

Eu descobri um CSS que te permite fazer isso

@media (max-width: 767px){
selector .elementor-row>:first-child {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
order: 2;
}
selector .elementor-row>:nth-child(2) {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
order: 1;

}
selector .elementor-row>:nth-child(3) {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
order: 3;

}
}
selector .elementor-widget:not(:last-child) {
margin-bottom: 0px;
}

Entendendo o CSS

selector .elementor-row>:first-child seleciona a primeira coluna

selector .elementor-row>:nth-child(2) seleciona a segunda coluna

selector .elementor-row>:nth-child(3)

Bom agora vamos às regras que ordenam as colunas

-webkit-box-ordinal-group
-ms-flex-order
order

Estes 3 pedaços de código são as regras para Chrome, Internet Explorer/Edge e outros navegadores

Então, basta colocar a ordem que quiser apenas adicionando um número

-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
order: 3;

Acima temos a regra que faz a coluna ficar como terceira

Então se vc quer que a segunda coluna do desktop, seja a terceira no mobile, você usa a seguinte regra css:

@media (max-width: 767px){
selector .elementor-row>:nth-child(2) {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
order: 3;
}

E assim por diante, seguindo o código que mostrei primeiro lá em cima.

Ficou com dúvidas? Deixe um comentário que eu te ajudo!

Corretor de Imóveis?

Se você precisa de uma Landing Page para anunciar seus imóveis, veja no link abaixo um modelo que pode ser só seu:

Modelo Landing Page Corretor de Imóveis