Inverser l’ordre des colonnes en mobile avec Divi

Nous allons dans un premier ajouter des classes css pour la rangée et de les colonnes de manière à pouvoir ensuite cibler en css et changer l’ordre des colonnes en dessous d’une certaine résolutions :

1. Dans les paramètres de la rangée, onglet avancé, ajoutez ceci dans le champ « classe css » : custom_row
2. Puis dans les paramètres de la colonne 1, également dans l’onglet avancé puis dans le champ « classe css » : col_2_mobile
3. Enfin dans les paramètres de la colonne 2, également dans l’onglet avancé puis dans le champ « classe css » : col_1_mobile

Il suffit ensuite d’ajouter ce code dans la zone « personnaliser css » qui se trouve dans Divi > Options du thème (onglet Général sur lequel vous arrivez par défaut)

/** inversion des colonnes mobiles**/
/*** on determine la largeur en dessous de laquelle le changement doit etre fait ***/
@media all and (max-width: 980px) {
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
 
/*** on indique de passer la seconde colonne en premier ***/
.col_1_mobile {
-webkit-order: 1;
order: 1;
}

/*** puis la premiere colonne en second ***/
.col_2_mobile {
-webkit-order: 2;
order: 2;
}}

Si vous souhaitez changer l’ordre de plus de 2 colonnes, il vous suffit de rajouter des classes css à vos autres colonnes, comme nous l’avons fait pour les colonnes 1 et 2. Il vous faut ensuite ajouter dans votre code css l’ordre de l’ensemble des colonnes. Par exemple ci-dessous pour 4 colonnes :

/** inversion des colonnes mobiles**/
/*** on determine la largeur en dessous de laquelle le changement doit etre fait ***/
@media all and (max-width: 980px) {
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
 
/*** on indique de passer la seconde colonne en premier ***/
.col_1_mobile {
-webkit-order: 1;
order: 1;
}

/*** puis la premiere colonne en second ***/
.col_2_mobile {
-webkit-order: 2;
order: 2;
}}
 
.col_3_mobile {
-webkit-order: 3;
order: 3;
}
 
.col_4_mobile {
-webkit-order: 4;
order: 4;
}}