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!