Omvendt rækkefølge på mobil

Nogle gange vil man gerne ændre rækkefølgen af elementer på mobil.

Fx med et to-kolonne-layout med tekst+billede efterfulgt af billede+tekst. Her vil vi gerne have at rækkefølgen er ens på mobil, altså: billed+tekst efterfulgt af billede+tekst.

Det kan gøres med lidt custom CSS på rækken, som skal ændre rækkefølge.

Brug én af metoderne herunder.

Metode 1

Tilføj custom CSS til rækken under Advanced > Custom CSS:

@media (max-width: 980px) {
selector {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
}

Gem evt. rækken som et Preset.

Metode 2

Tilføj en klasse til rækker, hvor rækkefølgen af rækkens kolonner skal ændres på mobil. Herunder bruger vi klassen “colreverse”.

Tilføj Custom CSS til Theme Options > Custom CSS:

@media (max-width: 980px) {
.colreverse.et_pb_row {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
}