På datorn visas kolumner korrekt: text till vänster, bild till höger. Öppna sajten på mobilen, och bilden hamnar först medan förklaringen glider ner under scrollen.

Känns det igen? Orsaken är att hela layouten på mobila enheter kollapsar till en enda kolumn, och blockordningen förblir fast: det som kommer först i HTML hamnar överst. Ingen vill ändra HTML bara för mobilen: det innebär att duplicera sektioner eller använda fula display: none-lösningar.

CSS erbjuder ett verktyg som löser problemet utan att ändra i koden: egenskapen order i kombination med flexbox. En rad i en media query, så byter blocken plats.

💡 Snabb överblick:

• Hur flexbox styr blockordning utan att ändra HTML
• CSS-kod för att byta plats på två kolumner i mobilen
• Hur du tilldelar klasser via en sidbyggare (med King Composer som exempel)
• Ett färdigt kodsnutt: kopiera, byt ut dina klasser, testa

Så fungerar CSS order: grunderna

Flexbox gör mer än att bara justera element horisontellt och vertikalt. Varje flexobjekt har en numerisk order-egenskap som bestämmer dess visuella position oberoende av dess plats i HTML.

Som standard har alla element order: 0, så de visas i den ordning de står i koden. Men så fort du tilldelar order: 1 till ett block och order: 2 till ett annat, arrangerar webbläsaren om dem. Det lägre numret kommer alltid först.

Det mest användbara: order fungerar inuti en media query. På datorn ligger blocken kvar i sina normala positioner, men på skärmar smalare än 768px byter de plats. Samtidigt förblir HTML orörd, sökmotorer ser den ursprungliga ordningen och tillgängligheten påverkas inte. MDN bekräftar: visuell ordning ändras, men tabbordningen gör det inte (så länge du inte rör tabindex).

Observera att order bara fungerar inuti en flexcontainer. Föräldrablocket måste ha display: flex eller display: inline-flex. Utan detta ignoreras order-egenskapen.

Steg-för-steg-genomgång: tillämpa order i praktiken

Tänk dig en typisk sektion: två kolumner i rad på datorn, staplade på mobilen. Målet: på mobiler ska den andra kolumnen (bild) komma FÖRST, och den första kolumnen (text) ska komma som nummer två.

Steg 1: förbered HTML-strukturen

Grundläggande kod består av en föräldracontainer och två barnblock. Ordningen i HTML: text först, sedan bild. Detta är exakt den struktur de flesta sidbyggare genererar, inklusive King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Steg 2: skriv CSS-koden

Gör först containern till en flexcontainer vid alla upplösningar. Tilldela sedan varje block en egen order i media queryn för mobilen och sträck ut dem till full bredd.

Lägg till denna kod i Dashboard → Appearance → Customize → Additional CSS i ditt tema eller via tillägget Code Snippets. Redigera inte temafiler direkt, eftersom dina stilar då försvinner vid uppdatering.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Genomgång: på datorn är båda blocken vanliga flexobjekt med order: 0 (standardvärdet enligt specifikationen). Text till vänster, bild till höger, som i HTML. På skärmar smalare än 768px aktiveras media queryn: .block-image får order: 1, vilket flyttar den först; .block-text får order: 2, vilket placerar den som nummer två. width: 100% ser till att blocken fyller hela skärmbredden horisontellt.

Viktig punkt: klasserna .block-text och .block-image är din egen namngivning. I ett verkligt projekt kommer du att rikta in dig på de klasser som din sidbyggare eller ditt tema genererar.

Steg 3: hur du tilldelar klasser i en sidbyggare

Universell metod: alla visuella byggare (Elementor, Bricks, äldre King Composer, inbyggda Gutenberg via grupp) låter dig lägga till en anpassad CSS-klass på sektioner och kolumner. Skärmbilderna nedan visar processen i King Composer-gränssnittet, men logiken är densamma överallt: hitta fältet "CSS Class" eller "Extra Class" i rad-/kolumninställningarna och ange önskat namn.

En tvåkumnssektion i King Composer ser ut så här:

Tilldela klassen section-wrapper till föräldracontainern (raden):

Tilldela klassen block-text till den vänstra kolumnen:

Tilldela klassen block-image till den högra kolumnen:

Efter att du sparat och publicerat, kontrollera sidan på en mobil eller via webbläsarens DevTools (F12 → Toggle Device Toolbar). Blocken ska byta plats: bild överst, text under.

Så anpassar du metoden för ditt projekt

Tre typiska scenarier och vad du ska ändra i koden:

Du använder en annan sidbyggare. Hitta fältet för anpassad CSS-klass i sektions-/kolumninställningarna. I Elementor är det Avancerat → CSS-klasser; i Bricks är det Inställningar → CSS ID & Classes. Ange dina klassnamn och uppdatera CSS-selektorerna därefter.

Du kodar för hand utan sidbyggare. Ännu enklare: skriv de nödvändiga klasserna direkt i din malls HTML-kod. CSS-koden förblir densamma; anpassa bara selektorerna till din kod.

Du har tre eller fler block istället för två. Lägg till en regel för varje block i media queryn med ett eget order-värde. Till exempel: .block-a { order: 1; }, .block-b { order: 2; } och .block-c { order: 3; }. Numren behöver inte vara i följd; du kan använda order: 10 för att garanterat flytta ett element till slutet.

Se till att föräldracontainern har display: flex; utan det ignoreras order tyst, och du slösar en halvtimme på felsökning. Det vanligaste scenariot: containern har som standard display: block, flex tillämpas men åsidosätts av en mer specifik temaregel. DevTools → Computed visar dig det slutliga värdet.

Se den här korta videon om ämnet, som tydligt demonstrerar hur order arrangerar om block i realtid:

⁉️🤔 Vanliga frågor

Fungerar order i alla webbläsare?

order har stöd i alla moderna webbläsare sedan 2015, inklusive Safari på iOS och Chrome på Android. Enligt data från caniuse.com är det globala flexbox-stödet 99,2%. Om du behöver stöd för IE11 (den förstår flexbox men har buggar), lägg till -ms-flex-order med samma värde.

Förstör order sökmotorernas indexering?

Nej. Sökmotorernas robotar läser sidans käll-HTML, och order ändrar bara den visuella ordningen i webbläsaren. Google bekräftar: CSS-omarrangemang påverkar inte rankningen. Den ursprungliga innehållsordningen i HTML förblir oförändrad.

Varför fungerar inte min order?

Tre vanligaste orsaker: (1) föräldrablocket har inte display: flex; (2) media queryn åsidosätts av en mer specifik temaregel; (3) barnelementet har ett annat display-värde än block (som inline). Det blir fortfarande ett flexobjekt, men beteendet kan skilja sig. Öppna DevTools, fliken Elements → Computed: kontrollera om din order tillämpas och inte är överstruken.

Kan jag ändra ordning med CSS Grid istället för flexbox?

Ja. Grid har en order-egenskap som fungerar identiskt. Dessutom erbjuder Grid ett alternativ: du kan sätta grid-row och grid-column för explicit elementpositionering utan order. Men om du bara har en rad med två kolumner är flexbox enklare (mindre kod).

Vad gör jag om min sidbyggare inte tillåter att lägga till en anpassad klass?

Vissa äldre eller nedskalade byggare visar inte fältet för CSS-klass. I så fall: (1) slå in sektionen i en grupp och tilldela klassen till gruppen; (2) använd byggarens inbyggda CSS-selektor (till exempel .kc-column-12a3b för King Composer), som du kan hitta via DevTools; (3) byt till Gutenberg med en gruppcontainer, där varje block har ett fält för "Ytterligare CSS-klass" i högerpanelen.

Viktiga slutsatser om att byta blockordning

CSS-egenskapen order är det enklaste sättet att styra den visuella sekvensen av block utan att redigera HTML. Flexibilitet uppnås med tre rader i en media query: sätt display: flex på containern, tilldela order: 1 och order: 2 till barnblocken vid mobilbrytpunkten, så är du klar.

Den säkraste implementeringsvägen: lägg till CSS via Appearance → Customize → Additional CSS eller tillägget Code Snippets; rör inte temafiler. Innan du publicerar, testa sidan via DevTools på en iPhone-emulator och på en riktig enhet. Om order inte fungerar, kontrollera först containerns beräknade display-värde.

Har du testat den här metoden på din sajt? Dela i kommentarerna vilken sidbyggare du använde och vad du bytte plats på.