Projektując stronę, często używamy naprzemiennego wyświetlania zdjęcia i tekstu usytuowanych w jednej linii. Raz umieszczamy zdjęcie po lewej stronie a po prawej tekst, w kolejnym wierszu robimy to odwrotnie, czyli po lewej stronie umieszczamy tekst a po prawej zdjęcie. Taki układ o ile dobrze wygląda w przeglądarce internetowej na komputerze, o tyle na urządzeniach mobilnych już nie koniecznie. Grafiki lub teksy wyświetlają się jedno nad drugim, zamiast się przeplatać – grafika, tekst, grafika, tekst itd.
W łatwy sposób możemy zmienić kolejność wyświetlania się kolumn w wierszu. Dodamy trzy klasy css. Pierwsza klasa będzie odnosić się do wiersza w którym mamy kolumny i nazwiemy ją custom-row, dwie pozostałe klasy dodany do naszych kolumn i nazwiemy je odpowiednio: first-on-mobile oraz second-on-mobile. Na koniec dodamy customowy kod css w zakładce Divi na samym dole. Zobacz na zrzuty ekranu i zwróć uwagę gdzie i jaki kod dodajemy.
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.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;
}
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
}
