På desktop vises kolonner riktig: tekst til venstre, bilde til høyre. Åpner du nettstedet på mobil, kommer bildet først mens forklaringen skyves ned, under scrollen.

Høres dette kjent ut? Årsaken er at på mobile enheter kollapser hele layouten til én enkelt kolonne, og blokkrekkefølgen forblir fast: det som kommer først i HTML, vises øverst. Ingen ønsker å endre HTML bare for mobil: det betyr duplisering av seksjoner eller bruk av hakkete display: none-løsninger.

CSS gir deg et verktøy som løser dette problemet uten å endre markup: order-egenskapen kombinert med flexbox. Én linje i en media query, så bytter blokkene plass.

💡 Rask oversikt:

• Hvordan flexbox styrer blokkrekkefølge uten å endre HTML
• CSS-kode for å bytte to kolonner på mobil
• Hvordan du legger til klasser via en page builder (med King Composer som eksempel)
• En klar-til-bruk-snutt: kopier den, bytt ut dine klasser, test den

Slik fungerer CSS order: det grunnleggende

Flexbox gjør mer enn bare å justere elementer horisontalt og vertikalt. Hvert flex-element har en numerisk order-egenskap som bestemmer dets visuelle posisjon uavhengig av plasseringen i HTML.

Som standard har alle elementer order: 0, så de vises i den rekkefølgen de er skrevet i koden. Men så snart du tildeler order: 1 til én blokk og order: 2 til en annen, omorganiserer nettleseren dem. Det laveste tallet kommer alltid først.

Det mest nyttige: order fungerer inne i en media query. På desktop forblir blokkene i sine normale posisjoner, men på skjermer smalere enn 768px bytter de plass. I mellomtiden forblir HTML-en urørt, søkemotorer ser den opprinnelige rekkefølgen, og tilgjengelighet påvirkes ikke. MDN bekrefter: visuell rekkefølge endres, men tab-rekkefølgen gjør det ikke (så lenge du ikke rører tabindex).

Merk at order bare fungerer inne i en flex-beholder. Forelderblokken må ha display: flex eller display: inline-flex. Uten dette ignoreres order-egenskapen.

Steg-for-steg-gjennomgang: bruk av order i praksis

Se for deg en typisk seksjon: to kolonner på rad på desktop, stablet på mobil. Målet: på mobil skal den andre kolonnen (bilde) komme FØRST, og den første kolonnen (tekst) skal komme som nummer to.

Steg 1: klargjør HTML-strukturen

Grunnleggende markup består av en forelderbeholder og to underblokker. Rekkefølgen i HTML: tekst først, så bilde. Dette er nøyaktig den strukturen de fleste page buildere genererer, inkludert 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-en

Gjør først beholderen til en flex-beholder ved alle oppløsninger. Deretter, i media query-en for mobil, tildeler du hver blokk sin egen order og strekker dem til full bredde.

Legg til denne koden i Dashboard → Utseende → Tilpass → Ekstra CSS i ditt tema eller via Code Snippets-pluginen. Ikke rediger temafiler direkte, for da går stilene dine tapt ved oppdatering.

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
}

Gjennomgang: på desktop er begge blokkene vanlige flex-elementer med order: 0 (standardverdien ifølge spesifikasjonen). Tekst til venstre, bilde til høyre, som i HTML. På skjermer smalere enn 768px aktiveres media query-en: .block-image får order: 1, som flytter den først; .block-text får order: 2, som plasserer den som nummer to. width: 100% sørger for at blokkene spenner over hele skjermbredden horisontalt.

Nøkkelpoeng: klassene .block-text og .block-image er din egen navngivning. I et reelt prosjekt vil du målrette de klassene din page builder eller ditt tema genererer.

Steg 3: slik tildeler du klasser i en page builder

Universell tilnærming: enhver visuell bygger (Elementor, Bricks, eldre King Composer, native Gutenberg via gruppe) lar deg legge til en egendefinert CSS-klasse på seksjoner og kolonner. Skjermbildene nedenfor viser prosessen i King Composer-grensesnittet, men logikken er den samme overalt: finn feltet «CSS Class» eller «Extra Class» i rad-/kolonneinnstillingene og skriv inn ønsket navn.

En to-kolonne-seksjon i King Composer ser slik ut:

Tildel klassen section-wrapper til forelderbeholderen (raden):

Tildel klassen block-text til venstre kolonne:

Tildel klassen block-image til høyre kolonne:

Etter lagring og publisering, sjekk siden på en mobil eller via nettleserens DevTools (F12 → Toggle Device Toolbar). Blokkene skal bytte plass: bilde øverst, tekst under.

Slik tilpasser du denne metoden for ditt prosjekt

Tre typiske scenarioer og hva du må endre i koden:

Du bruker en annen page builder. Finn feltet for egendefinert CSS-klasse i seksjons-/kolonneinnstillingene. I Elementor er det Avansert → CSS-klasser; i Bricks er det Innstillinger → CSS ID og klasser. Skriv inn dine klassenavn og oppdater CSS-selektorene tilsvarende.

Du koder for hånd uten page builder. Enda enklere: skriv de nødvendige klassene direkte i malens HTML-markup. CSS-koden forblir den samme; bare tilpass selektorene til din markup.

Du har tre eller flere blokker i stedet for to. Legg til en regel for hver blokk i media query-en med sin egen order-verdi. For eksempel: .block-a { order: 1; }, .block-b { order: 2; } og .block-c { order: 3; }. Tallene trenger ikke være fortløpende; du kan bruke order: 10 for å garantere at et element flyttes til slutten.

Sørg for at forelderbeholderen har display: flex; uten det ignoreres order i stillhet, og du kaster bort en halvtime på feilsøking. Det vanligste scenarioet: beholderen har standard display: block, flex er lagt til men overstyres av en mer spesifikk temaregel. DevTools → Computed viser deg den endelige verdien.

Se denne korte videoen om emnet, som tydelig demonstrerer hvordan order omorganiserer blokker i sanntid:

⁉️🤔 Ofte stilte spørsmål

Fungerer order i alle nettlesere?

order har vært støttet av alle moderne nettlesere siden 2015, inkludert Safari på iOS og Chrome på Android. Ifølge data fra caniuse.com er global flexbox-støtte på 99,2%. Trenger du IE11-støtte (den forstår flexbox men har feil), legg til -ms-flex-order med samme verdi.

Ødelegger order søkemotorindeksering?

Nei. Søkemotorroboter leser sidens kilde-HTML, og order endrer bare den visuelle rekkefølgen i nettleseren. Google bekrefter: CSS-omorganiseringer påvirker ikke rangering. Den opprinnelige innholdsrekkefølgen i HTML forblir uendret.

Hvorfor fungerer ikke min order?

Tre vanligste årsaker: (1) forelderblokken er ikke display: flex; (2) media query-en overstyres av en mer spesifikk temaregel; (3) underordnet element har en annen display-verdi enn block (for eksempel inline). Det blir fortsatt et flex-element, men oppførselen kan variere. Åpne DevTools, Elements-fanen → Computed: sjekk om din order er tatt i bruk og ikke overstrøket.

Kan jeg endre rekkefølge med CSS Grid i stedet for flexbox?

Ja. Grid har en order-egenskap som fungerer identisk. I tillegg tilbyr Grid et alternativ: du kan sette grid-row og grid-column for eksplisitt elementposisjonering uten order. Men hvis du bare har en rad med to kolonner, er flexbox enklere (mindre kode).

Hva om min page builder ikke tillater å legge til en egendefinert klasse?

Noen eldre eller nedstrippede buildere viser ikke feltet for CSS-klasse. I så fall: (1) pakk seksjonen inn i en gruppe og tildel klassen til gruppen; (2) bruk byggerens innebygde CSS-selektor (for eksempel .kc-column-12a3b for King Composer), som du kan finne via DevTools; (3) bytt til Gutenberg med en gruppebeholder, der hver blokk har et «Ekstra CSS-klasse»-felt i høyre panel.

Hovedpunkter om bytting av blokkrekkefølge

CSS-egenskapen order er den enkleste måten å kontrollere den visuelle sekvensen av blokker uten å redigere HTML. Fleksibilitet oppnås med tre linjer i en media query: sett display: flex på beholderen, tildel order: 1 og order: 2 til underblokker ved mobilbrytningspunktet, så er du ferdig.

Den sikreste implementeringsveien: legg til CSS via Utseende → Tilpass → Ekstra CSS eller Code Snippets-pluginen; ikke rør temafiler. Før publisering, test siden via DevTools på en iPhone-emulator og på en ekte enhet. Hvis order ikke fungerer, sjekk først beholdernes Computed display-verdi.

Har du prøvd denne metoden på ditt nettsted? Del i kommentarene hvilken page builder du brukte og hva du byttet om på.