Lauaarvutis kuvatakse veerud õigesti: tekst vasakul, pilt paremal. Ava sait telefonis ja pilt tuleb esimesena, samal ajal kui selgitus libiseb allapoole, kerimisalast välja.

Tuttav olukord? Põhjus on selles, et mobiilseadmetes variseb kogu paigutus ühte veergu ning plokkide järjekord jääb fikseerituks: see, mis on HTML-is eespool, kuvatakse üleval. Keegi ei taha HTML-i ainult mobiili pärast muuta: see tähendaks sektsioonide dubleerimist või räpaste display: none lahenduste kasutamist.

CSS pakub tööriista, mis lahendab selle probleemi märgendit muutmata: order atribuut koos flexbox'iga. Üks rida meediapäringus ja plokid vahetavad kohad.

💡 Kiirülevaade:

• Kuidas flexbox juhib plokkide järjekorda HTML-i muutmata
• CSS-kood kahe veeru vahetamiseks mobiilis
• Kuidas rakendada klasse lehe koostaja kaudu (näitena King Composer)
• Valmis kasutamiseks mõeldud koodijupp: kopeeri, asenda oma klassid, testi

Kuidas CSS-i order töötab: põhitõed

Flexbox teeb enamat kui lihtsalt elementide horisontaalne ja vertikaalne joondamine. Igal flex-elemendil on numbriline order atribuut, mis määrab selle visuaalse asukoha sõltumatult tema kohast HTML-is.

Vaikimisi on kõigil elementidel order: 0, seega kuvatakse neid koodis kirjutatud järjekorras. Kuid niipea, kui määrad ühele plokile order: 1 ja teisele order: 2, paigutab brauser need ümber. Madalam number tuleb alati esimesena.

Kõige kasulikum osa: order töötab meediapäringu sees. Lauaarvutis püsivad plokid oma tavalistel kohtadel, kuid kitsamatel kui 768px ekraanidel vahetavad nad kohad. Samal ajal jääb HTML puutumata, otsingumootorid näevad algset järjekorda ja ligipääsetavus ei ole mõjutatud. MDN kinnitab: visuaalne järjekord muutub, kuid tabulaatori järjekord mitte (seni, kuni sa tabindex'i ei puuduta).

Pane tähele, et order töötab ainult flex-konteineri sees. Vanemplokil peab olema display: flex või display: inline-flex. Ilma selleta ignoreeritakse order atribuuti.

Samm-sammuline jaotus: order'i rakendamine praktikas

Vaatleme tüüpilist sektsiooni: kaks veergu reas lauaarvutis, üksteise all mobiilis. Eesmärk: telefonides peaks teine veerg (pilt) olema ESIMENE ja esimene veerg (tekst) teine.

1. Samm: valmista ette HTML-struktuur

Põhiline märgend koosneb vanemkonteinerist ja kahest alamplokist. Järjekord HTML-is: kõigepealt tekst, seejärel pilt. See on täpselt see struktuur, mida enamik lehe koostajaid genereerib, sealhulgas King Composer.

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

2. Samm: kirjuta CSS

Esiteks tee konteiner flex-konteineriks kõigil resolutsioonidel. Seejärel määra mobiili meediapäringus igale plokile oma order ja venita need täislaiuseks.

Lisa see kood oma teemas Töölaud → Välimus → Kohanda → Lisatud CSS või Code Snippets pluginaga. Ära redigeeri teemafaile otse, sest sinu stiilid lähevad uuendamisel kaotsi.

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
}

Jaotus: lauaarvutis on mõlemad plokid tavalised flex-elemendid väärtusega order: 0 (vaikeväärtus vastavalt spetsifikatsioonile). Tekst vasakul, pilt paremal, nagu HTML-is. Kitsamatel kui 768px ekraanidel rakendub meediapäring: .block-image saab order: 1, liigutades selle esimeseks; .block-text saab order: 2, asetades selle teiseks. width: 100% tagab, et plokid katavad horisontaalselt kogu ekraani laiuse.

Võtmepunkt: klassid .block-text ja .block-image on sinu enda nimetused. Reaalses projektis sihid sa neid klasse, mida sinu lehe koostaja või teema genereerib.

3. Samm: kuidas määrata klasse lehe koostajas

Universaalne lähenemine: iga visuaalne koostaja (Elementor, Bricks, pärand King Composer, natiivne Gutenberg grupi kaudu) võimaldab lisada sektsioonidele ja veergudele kohandatud CSS-klassi. Allolevad ekraanipildid näitavad protsessi King Composer'i liideses, kuid loogika on igal pool sama: leia rea/veeru seadetest väli „CSS Class" või „Extra Class" ja sisesta soovitud nimi.

Kaheveeruline sektsioon King Composer'is näeb välja selline:

Määra klass section-wrapper vanemkonteinerile (reale):

Määra klass block-text vasakpoolsele veerule:

Määra klass block-image parempoolsele veerule:

Pärast salvestamist ja avaldamist kontrolli lehte telefonis või brauseri DevTools kaudu (F12 → Lülita seadme tööriistariba sisse). Plokid peaksid kohad vahetama: pilt üleval, tekst all.

Kuidas kohandada seda meetodit oma projekti jaoks

Kolm tüüpilist stsenaariumi ja mida koodis muuta:

Kasutad teist lehe koostajat. Leia sektsiooni/veeru seadetest kohandatud CSS-klassi väli. Elementoris on see Advanced → CSS Classes; Bricksis Settings → CSS ID & Classes. Sisesta oma klassi nimed ja uuenda CSS-selektoreid vastavalt.

Kodeerid käsitsi ilma lehe koostajata. Veelgi lihtsam: kirjuta vajalikud klassid otse oma malli HTML-märgendisse. CSS-kood jääb samaks; kohanda ainult selektorid oma märgendi järgi.

Sul on kahe asemel kolm või enam plokki. Lisa meediapäringusse reegel iga ploki jaoks koos oma order väärtusega. Näiteks: .block-a { order: 1; }, .block-b { order: 2; } ja .block-c { order: 3; }. Numbrid ei pea olema järjestikused; võid kasutada order: 10, et tagada elemendi liikumine lõppu.

Veendu, et vanemkonteineril oleks display: flex; ilma selleta ignoreeritakse order'it vaikselt ja sa raiskad pool tundi vea otsimisele. Kõige tavalisem stsenaarium: konteineri vaikeväärtus on display: block, flex on rakendatud, kuid selle kirjutab üle spetsiifilisem teemareegel. DevTools → Computed näitab sulle lõplikku väärtust.

Vaata seda lühikest videot teemal, mis demonstreerib selgelt, kuidas order plokke reaalajas ümber paigutab:

⁉️🤔 Korduma kippuvad küsimused

Kas order töötab kõigis brauserites?

order on olnud toetatud kõigis kaasaegsetes brauserites alates 2015. aastast, sealhulgas Safari iOS-is ja Chrome Androidis. caniuse.com andmetel on globaalne flexbox'i tugi 99,2%. Kui vajad IE11 tuge (see mõistab flexbox'i, kuid sellel on vigu), lisa -ms-flex-order sama väärtusega.

Kas order rikub otsingumootori indekseerimist?

Ei. Otsingumootori robotid loevad lehe lähtekoodi HTML-i ja order muudab ainult visuaalset järjekorda brauseris. Google kinnitab: CSS-i ümberpaigutused ei mõjuta paremusjärjestust. Algne sisu järjekord HTML-is jääb muutumatuks.

Miks minu order ei tööta?

Kolm kõige levinumat põhjust: (1) vanemplokk ei ole display: flex; (2) meediapäringu kirjutab üle spetsiifilisem teemareegel; (3) alamelemendil on mõni muu display väärtus peale block (näiteks inline). Sellest saab ikkagi flex-element, kuid käitumine võib erineda. Ava DevTools, Elements sakk → Computed: kontrolli, kas sinu order on rakendatud ja mitte läbi kriipsutatud.

Kas ma saan järjekorda muuta CSS Grid'i, mitte flexbox'i abil?

Jah. Grid'il on order atribuut, mis töötab identselt. Lisaks pakub Grid alternatiivi: saad määrata grid-row ja grid-column elementide selgesõnaliseks positsioneerimiseks ilma order'ita. Aga kui sul on lihtsalt kaheveeruline rida, on flexbox lihtsam (vähem koodi).

Mis siis, kui minu lehe koostaja ei võimalda kohandatud klassi lisada?

Mõned vanemad või kärbitud koostajad ei näita CSS Class välja. Sel juhul: (1) mähi sektsioon gruppi ja määra klass grupile; (2) kasuta koostaja sisseehitatud CSS-selektorit (näiteks King Composer'i puhul .kc-column-12a3b), mille leiad DevTools'i kaudu; (3) mine üle Gutenbergile koos grupikonteineriga, kus igal plokil on paremal paneelil väli „Additional CSS Class".

Peamised järeldused plokkide järjekorra vahetamise kohta

CSS-i order atribuut on lihtsaim viis juhtida plokkide visuaalset järjestust HTML-i redigeerimata. Paindlikkus saavutatakse kolme reaga meediapäringus: määra konteinerile display: flex, määra alamplokkidele mobiili murdepunktis order: 1 ja order: 2 ning ongi valmis.

Kõige ohutum rakendustee: lisa CSS läbi Välimus → Kohanda → Lisatud CSS või Code Snippets pluginaga; ära puuduta teemafaile. Enne avaldamist testi lehte DevTools'i kaudu iPhone'i emulaatoris ja reaalses seadmes. Kui order ei tööta, kontrolli esmalt konteineri Computed display väärtust.

Oled seda meetodit oma saidil proovinud? Jaga kommentaarides, millist lehe koostajat kasutasid ja mida sa vahetasid.