Kolonner er responsive i WordPress. På mindre enheder stables de typisk sådan, at kolonnen til venstre ligger øverst. Som regel er det ok. Men ikke altid. Hvordan får man en af de andre kolonner øverst? Denne tutorial viser, hvordan du kan lægge den midterste kolonne øverst.

Hvis du har brug for at stable på en anden måde, så er det let at modificere denne CSS, så det passer med dine behov.

Herunder ser du tre kolonner. På mindre skærme vil kolonnerne stakke indholdes sådan, at den venstre kolonne lægger sig øverst.

Kolonnerne fungerer ved hjælp at flexbox. Det kan du udnytte. Kolonnerne herunder demonstrerer princippet.

A) Giv dine Kolonner en class

Marker kolonnerne i “Dokumentpanelet”. Under fanebladet Blok / Avanceret kan du tilføje “Ekstra CSS-klasser. Herunder kan du se, hvordan jeg har tilføjet klassen box:

B) Blok: Tilpasset HTML

Når klassen er tilføjet kan du begynde trylleriet med CSS.

Tilføj blokken Tilpasset HTML oven over kolonnerne. Her kan du så skrive dine styles i en <style> container.

I <style> containeren skrives CSS a la det her:

<style>
/** Flexbox ændrer rækkefølgen på stakken. Du kan altså den kolonne som skal vises øverst */

@media only screen and (max-width: 800px) {

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) {
  order: 2;
}
.box :nth-child(2) {
  order: 1;
}
.box :nth-child(3) {
  order: 3;
}
	
}

</style>

C) Test

Sandhedens time er inde. Virker vores CSS-hekseri? Prøv at ændre størrelsen på browservinduet – eller brug Inspect Tool.

Flere muligheder

Den viste kode vil kun påvirke en enkelt webside. Hvis du ønsker at bruge effekten andre steder, så kan CSS’en tilføjes ved hjælp af fx Simple Custom CSS and JS.

Gør sådan:

• Opret et CSS med koden ovenover.
• Gem det.
• Opret Kolonner med tre kolonner – og giv blokken classen box.

Nu kan du bruge effekten overalt på sitet.