
DIVI šablona má nastaveno pořadí při mobilním zobrazení zleva doprava, to znamená pokud máte na stránce vlevo obrázek a vpravo text a pod tím vlevo text a vpravo obrázek, tak na mobilu se vám zobrazí pořadí takto:
- obrázek
- text
- text
- obrázek

Což si někdo nemusí přát. Toto pořadí se dá snadno změnit, tak jak potřebujete.
V administraci WordPress jděte do DIVI>>Nastavení šablony a dole najdete „Přizpůsobené CSS“

Do CSS vložíte tento kód
@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
;
}
}
Pak přejděte do stránky, kde chcete upravit pořadí, klinete na nastavení řádku (ozubené kolečko)

Klinete na záložku „Pokročilé“ a vyberte IC a třídy CSS a dopište custom_row

Dále klinete na záložku „Obsah“
tam uvidíme ozubená kolečka jednotlivých sloupečků první je pro text a v duhém sloupečku máme obrázek.

Přes ozubené kolečko>>Pokročilé>>ID a třídy CSS doplníte v kolonce „Třída CSS“ text first-on-mobile nebo second-on-mobile
My doplníme u prvního ozubeného kolečka second-on-mobile a u druhého ozubeného kolečka first-on-mobile.
Uložíme a mělo by být hotovo, zkontrolujte si na mobilu a nezapomeňte si aktualizovat paměť prohlížeče ctr+F5, aby se vám úpravy zobrazily.
