Como alternar colunas no Elementor Mobile de maneira customizada

Escrito por

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!

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email
Compartilhar no pinterest
Compartilhar no whatsapp
Compartilhar no telegram
Compartilhar no email

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Woocommerce label complemento não aparece
Desenvolvimento Web

Woocommerce label complemento não aparece

Eu estava com um problema: o label de complemento não estava aparecendo. Para resolver acrescentei o seguinte CSS no tema:

Ferramentas para Webmaster
Desenvolvimento Web

Ferramentas para Webmaster

Conheça as Ferramentas para Webmaster que vão te ajudar a trabalhar melhor e mais rápido. Ferramenta do Google para analisar configuração MX https://toolbox.googleapps.com/apps/checkmx/ Ferramenta para

Livros que indico


Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo

Curso Elementor Grátis

Aprenda todos os Widgets do Elementor nesse Curso Elementor exclusivo para você