Työpöydällä sarakkeet näkyvät oikein: teksti vasemmalla, kuva oikealla. Avaa sivusto puhelimella, ja kuva tulee ensin, kun taas selitys liukuu alas, vierityksen alapuolelle.

Kuulostaako tutulta? Syy on se, että mobiililaitteilla koko asettelu romahtaa yhteen sarakkeeseen, ja lohkojen järjestys pysyy kiinteänä: se, mikä tulee HTML:ssä ensin, näkyy päällimmäisenä. Kukaan ei halua muuttaa HTML:ää vain mobiilia varten: se tarkoittaa osioiden kahdentamista tai hakkereita, kuten display: none -kiertotapoja.

CSS tarjoaa työkalun, joka ratkaisee tämän ongelman muuttamatta merkintää: order-ominaisuus yhdistettynä flexboxiin. Yksi rivi media query -säännössä, ja lohkot vaihtavat paikkaa.

💡 Pikakatsaus:

• Miten flexbox ohjaa lohkojen järjestystä muuttamatta HTML:ää
• CSS-koodi kahden sarakkeen vaihtamiseen mobiilissa
• Miten luokkia sovelletaan sivunrakentajan kautta (esimerkkinä King Composer)
• Valmis koodinpätkä: kopioi se, korvaa omilla luokillasi, testaa

Miten CSS order toimii: perusasiat

Flexbox tekee muutakin kuin vain kohdistaa elementtejä vaaka- ja pystysuunnassa. Jokaisella flex-alkiolla on numeerinen order-ominaisuus, joka määrittää sen visuaalisen sijainnin riippumatta sen paikasta HTML:ssä.

Oletuksena kaikilla elementeillä on order: 0, joten ne näkyvät siinä järjestyksessä kuin ne on kirjoitettu koodiin. Mutta kun annat yhdelle lohkolle order: 1 ja toiselle order: 2, selain järjestää ne uudelleen. Pienempi numero tulee aina ensin.

Hyödyllisin osa: order toimii media queryn sisällä. Työpöydällä lohkot pysyvät normaaleilla paikoillaan, mutta alle 768 pikselin levyisillä näytöillä ne vaihtavat paikkaa. Samaan aikaan HTML pysyy koskemattomana, hakukoneet näkevät alkuperäisen järjestyksen, eikä saavutettavuus kärsi. MDN vahvistaa: visuaalinen järjestys muuttuu, mutta sarkainjärjestys ei (kunhan et koske tabindexiin).

Huomaa, että order toimii vain flex-säiliön sisällä. Ylätason lohkolla on oltava display: flex tai display: inline-flex. Ilman tätä order-ominaisuus ohitetaan.

Vaiheittainen erittely: orderin soveltaminen käytännössä

Tarkastellaan tyypillistä osiota: kaksi saraketta rivissä työpöydällä, pinottuna mobiilissa. Tavoite: puhelimissa toisen sarakkeen (kuva) tulee olla ENSIN ja ensimmäisen sarakkeen (teksti) toisena.

Vaihe 1: valmistele HTML-rakenne

Perusmerkintä koostuu yläsäiliöstä ja kahdesta alilohkosta. Järjestys HTML:ssä: teksti ensin, sitten kuva. Juuri tämän rakenteen useimmat sivunrakentajat tuottavat, mukaan lukien King Composer.

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

Vaihe 2: kirjoita CSS

Tee ensin säiliöstä flex-säiliö kaikilla resoluutioilla. Anna sitten mobiilin media kyselyssä kullekin lohkolle oma order-arvonsa ja venytä ne koko leveydelle.

Lisää tämä koodi kohdassa Hallintanäkymä → Ulkoasu → Mukauta → Lisä-CSS teemassasi tai Code Snippets -lisäosan kautta. Älä muokkaa teematiedostoja suoraan, koska tyylisi katoavat päivityksen yhteydessä.

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
}

Erittely: työpöydällä molemmat lohkot ovat tavallisia flex-alkioita, joilla on order: 0 (oletusarvo spesifikaation mukaan). Teksti vasemmalla, kuva oikealla, kuten HTML:ssä. Alle 768 pikselin levyisillä näytöillä media query aktivoituu: .block-image saa arvon order: 1, siirtäen sen ensimmäiseksi; .block-text saa arvon order: 2, sijoittaen sen toiseksi. width: 100% varmistaa, että lohkot vievät koko näytön leveyden vaakasuunnassa.

Avainkohta: luokat .block-text ja .block-image ovat omaa nimeämistäsi. Oikeassa projektissa kohdistat niihin luokkiin, joita sivunrakentajasi tai teemasi tuottaa.

Vaihe 3: miten luokkia annetaan sivunrakentajassa

Yleispätevä lähestymistapa: mikä tahansa visuaalinen rakentaja (Elementor, Bricks, vanha King Composer, natiivi Gutenberg ryhmän kautta) antaa sinun lisätä mukautetun CSS-luokan osioihin ja sarakkeisiin. Alla olevat kuvakaappaukset näyttävät prosessin King Composerin käyttöliittymässä, mutta logiikka on sama kaikkialla: etsi rivi- tai sarakeasetuksista "CSS Class" tai "Extra Class" -kenttä ja syötä haluamasi nimi.

Kahden sarakkeen osio King Composerissa näyttää tältä:

Anna yläsäiliölle (riville) luokka section-wrapper:

Anna vasemmalle sarakkeelle luokka block-text:

Anna oikealle sarakkeelle luokka block-image:

Tallentamisen ja julkaisun jälkeen tarkista sivu puhelimella tai selaimen DevTools-työkaluilla (F12 → Toggle Device Toolbar). Lohkojen tulisi vaihtaa paikkaa: kuva päällä, teksti alla.

Miten sovitat tämän menetelmän projektiisi

Kolme tyypillistä skenaariota ja mitä koodissa muutetaan:

Käytät eri sivunrakentajaa. Etsi mukautetun CSS-luokan kenttä osion/sarakkeen asetuksista. Elementorissa se on Advanced → CSS Classes; Bricksissä Settings → CSS ID & Classes. Syötä luokkiesi nimet ja päivitä CSS-valitsimet vastaavasti.

Koodaat käsin ilman sivunrakentajaa. Vielä helpompaa: kirjoita tarvittavat luokat suoraan mallipohjasi HTML-merkintään. CSS-koodi pysyy samana; sovita vain valitsimet merkintääsi.

Sinulla on kolme tai useampi lohko kahden sijaan. Lisää sääntö jokaiselle lohkolle media kyselyyn omalla order-arvollaan. Esimerkiksi: .block-a { order: 1; }, .block-b { order: 2; } ja .block-c { order: 3; }. Numeroiden ei tarvitse olla peräkkäisiä; voit käyttää order: 10 taataksesi elementin siirtymisen loppuun.

Varmista, että yläsäiliöllä on display: flex; ilman sitä order ohitetaan hiljaisesti, ja tuhlaat puoli tuntia debuggaamiseen. Yleisin skenaario: säiliön oletusarvo on display: block, flex on asetettu, mutta tarkempi teemasääntö ohittaa sen. DevTools → Computed näyttää lopullisen arvon.

Katso tämä lyhyt video aiheesta, joka havainnollistaa selkeästi, miten order järjestää lohkoja uudelleen reaaliajassa:

⁉️🤔 Usein kysytyt kysymykset

Toimiiko order kaikissa selaimissa?

order on ollut kaikkien nykyaikaisten selainten tukema vuodesta 2015 lähtien, mukaan lukien Safari iOS:ssä ja Chrome Androidissa. caniuse.com-sivuston tietojen mukaan flexboxin maailmanlaajuinen tuki on 99,2%. Jos tarvitset IE11-tukea (se ymmärtää flexboxin, mutta siinä on bugeja), lisää -ms-flex-order samalla arvolla.

Rikkoiko order hakukoneindeksoinnin?

Ei. Hakukoneiden indeksoijat lukevat sivun lähde-HTML:ää, ja order muuttaa vain visuaalista järjestystä selaimessa. Google vahvistaa: CSS-uudelleenjärjestelyt eivät vaikuta sijoitukseen. Alkuperäinen sisällön järjestys HTML:ssä pysyy muuttumattomana.

Miksi orderini ei toimi?

Kolme yleisintä syytä: (1) ylätason lohko ei ole display: flex; (2) tarkempi teemasääntö ohittaa media queryn; (3) alielementillä on jokin muu display-arvo kuin block (kuten inline). Siitä tulee silti flex-alkio, mutta käyttäytyminen voi poiketa. Avaa DevTools, Elements-välilehti → Computed: tarkista, onko order-arvosi käytössä eikä yliviivattu.

Voinko muuttaa järjestystä CSS Gridin avulla flexboxin sijaan?

Kyllä. Gridillä on order-ominaisuus, joka toimii samalla tavalla. Lisäksi Grid tarjoaa vaihtoehdon: voit asettaa grid-row ja grid-column elementtien tarkkaa sijoittelua varten ilman order-ominaisuutta. Mutta jos sinulla on yksinkertaisesti kahden sarakkeen rivi, flexbox on yksinkertaisempi (vähemmän koodia).

Entä jos sivunrakentajani ei salli mukautetun luokan lisäämistä?

Jotkin vanhemmat tai karsitut rakentajat eivät näytä CSS Class -kenttää. Siinä tapauksessa: (1) kääri osio ryhmään ja anna luokka ryhmälle; (2) käytä rakentajan sisäänrakennettua CSS-valitsinta (esimerkiksi .kc-column-12a3b King Composerille), jonka löydät DevTools-työkalujen kautta; (3) vaihda Gutenbergiin ryhmäsäiliön kanssa, jossa jokaisella lohkolla on "Additional CSS Class" -kenttä oikeassa paneelissa.

Keskeiset opit lohkojen järjestyksen vaihtamisesta

CSS order-ominaisuus on helpoin tapa hallita lohkojen visuaalista järjestystä muokkaamatta HTML:ää. Joustavuus saavutetaan kolmella rivillä media kyselyssä: aseta säiliölle display: flex, anna alilohkoille order: 1 ja order: 2 mobiilin taitepisteessä, ja homma on valmis.

Turvallisin toteutuspolku: lisää CSS kohdan Ulkoasu → Mukauta → Lisä-CSS tai Code Snippets -lisäosan kautta; älä koske teematiedostoihin. Ennen julkaisua testaa sivu DevTools-työkaluilla iPhone-emulaattorissa ja oikealla laitteella. Jos order ei toimi, tarkista ensin säiliön Computed display-arvo.

Oletko kokeillut tätä menetelmää sivustollasi? Jaa kommenteissa, mitä sivunrakentajaa käytit ja mitä vaihdoit.