Zo wissel je twee kolommen op mobiel en tablet

17 jun 2021 | CSS MUSTHAVE, MOBIEL

Marloes met laptop blog
Als kolommen onder elkaar komen op mobiel of tablet, dan is dat standaard in de volgorde waarin ze van links naar rechts staan op desktop. Daar kun je van afwijken met deze CSS!
kolommen-omwisselen-op-mobiel-divi

Stap 1: Ga in je Dashboard naar Divi -> Thema Opties

Plak onderaan bij Aangepaste CSS de volgende CSS code:

/*KOLOMMEN OMWISSELEN OP MOBIEL EN TABLET*/
@media all and (max-width: 980px) {
    .wissel-kolommen {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

TOELICHTING: Deze CSS draait de volgorde van de kolommen om (vandaar de term: reverse). Deze CSS werkt ook bij een Rij met méér dan 2 kolommen, de vraag is alleen of je dit ooit wilt 😋.

Stap 2: Ga naar je Rij instellingen -> Geavanceerd

Onder CSS-ID en -klasses zet je dan bij CSS-ID wissel-kolommen.

Stap 3: Check de mobiele weergave en klaar!

Doordat je de kolommen omwisselt, moet je vaak nog wat dingen aanpassen in de marges en buffers voor de mobiele weergave. Is alles naar je zin? Dan ben je klaar!

TIP!

Als je deze truc vaker wilt toepassen op je website, hoef je dus alleen nog maar in de Rij-instellingen de CSS Klasse wissel-kolommen mee te geven 😎.

Succes en groetjes! 🤩 Let me know als je er wat mee kon!

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!