Na desktopie kolumny stoją prawidłowo: tekst po lewej, obraz po prawej. Otwierają Państwo stronę na telefonie i najpierw widzą obraz, a opis zjeżdża na dół, pod scroll.

Znajoma sytuacja? Przyczyna tkwi w tym, że na urządzeniach mobilnych cały układ zwija się do jednej kolumny, a kolejność bloków pozostaje sztywna: ten, który jest pierwszy w HTML, jest na górze. Nikt nie chce zmieniać HTML-a dla wersji mobilnej: to dublowanie sekcji lub protezy z display: none.

CSS daje narzędzie, które rozwiązuje problem bez ingerencji w układ, właściwość order w połączeniu z flexboxem. Jedna linijka w media query i bloki zamieniają się miejscami.

💡 Szybki przegląd:

• Jak flexbox zarządza kolejnością bloków bez zmiany HTML
• Kod CSS do zamiany miejscami dwóch kolumn na urządzeniach mobilnych
• Jak zastosować klasy przez page builder (na przykładzie King Composer)
• Gotowy snippet: kopiują Państwo, wstawiają swoje klasy, sprawdzają

Jak działa CSS order: krótko o najważniejszym

Flexbox potrafi nie tylko wyrównywać elementy w poziomie i pionie. Każdy element flex ma liczbową właściwość order, która określa jego wizualną pozycję niezależnie od miejsca w HTML.

Domyślnie order: 0 dla wszystkich elementów, występują one w takiej kolejności, w jakiej są zapisane w kodzie. Wystarczy jednak nadać jednemu blokowi order: 1, a drugiemu order: 2, a przeglądarka je przestawi. Mniejsza liczba zawsze idzie pierwsza.

Najbardziej przydatne: order działa wewnątrz media query. Na desktopie bloki stoją jak zwykle, a na ekranach do 768px zamieniają się miejscami. HTML pozostaje przy tym nietknięty, wyszukiwarki widzą oryginalną kolejność, dostępność nie cierpi. MDN potwierdza: visual order zmienia się, tab order nie (dopóki nie ruszają Państwo tabindex).

Proszę zwrócić uwagę: order działa tylko wewnątrz kontenera flex. Blok nadrzędny musi mieć display: flex lub display: inline-flex. Bez tego właściwość order jest ignorowana.

Analiza krok po kroku: stosujemy order w praktyce

Rozważmy typową sekcję: dwie kolumny w rzędzie na desktopie, jedna nad drugą na urządzeniach mobilnych. Zadanie: na telefonie druga kolumna (obraz) ma być PIERWSZA, a pierwsza (tekst) druga.

Krok 1: przygotowujemy strukturę HTML

Podstawowy układ: kontener nadrzędny i dwa bloki podrzędne. Kolejność w HTML: najpierw tekst, potem obraz. Właśnie taką strukturę generuje większość page builderów, w tym King Composer.

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

Krok 2: piszemy CSS

Najpierw robimy z kontenera kontener flex dla wszystkich rozdzielczości. Następnie w media query dla urządzeń mobilnych nadajemy każdemu blokowi jego order i rozciągamy na pełną szerokość.

Proszę dodać ten kod w Dashboard → Appearance → Customize → Additional CSS swojego motywu lub przez wtyczkę Code Snippets. Proszę nie edytować plików motywu bezpośrednio: przy aktualizacji style przepadną.

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
}

Analiza: na desktopie oba bloki to zwykłe elementy flex z order: 0 (wartość domyślna zgodnie ze specyfikacją). Tekst po lewej, obraz po prawej, jak w HTML. Na ekranach do 768px uruchamia się media query: blok .block-image otrzymuje order: 1, idzie pierwszy; blok .block-text otrzymuje order: 2, staje się drugi. width: 100% gwarantuje, że bloki zajmą cały ekran w poziomie.

Kluczowy moment: klasy .block-text i .block-image to Państwa własne nazewnictwo. W rzeczywistym projekcie zaczepiają się Państwo o te klasy, które generuje Państwa page builder lub motyw.

Krok 3: jak nadać klasy w page builderze

Uniwersalne podejście: każdy wizualny konstruktor (Elementor, Bricks, stary King Composer, natywny Gutenberg przez grupę) pozwala dodać dowolną klasę CSS do sekcji i kolumn. Na zrzutach ekranu poniżej pokazano proces w interfejsie King Composer, ale logika jest wszędzie taka sama: znajdują Państwo pole „CSS Class" lub „Extra Class" w ustawieniach wiersza/kolumny i wpisują potrzebną nazwę.

Sekcja z dwóch kolumn w King Composer wygląda tak:

Kontenerowi nadrzędnemu (wiersz) nadajemy klasę section-wrapper:

Lewej kolumnie klasę block-text:

Prawej kolumnie klasę block-image:

Po zapisaniu i publikacji proszę sprawdzić stronę z telefonu lub przez DevTools przeglądarki (F12 → Toggle Device Toolbar). Bloki powinny zamienić się miejscami: obraz na górze, tekst pod nim.

Jak dostosować metodę do swojego projektu

Trzy typowe scenariusze i co zmieniać w kodzie:

Używają Państwo innego page buildera. Proszę znaleźć pole dla dowolnej klasy CSS w ustawieniach sekcji/kolumny. W Elementor to Advanced → CSS Classes, w Bricks Settings → CSS ID & Classes. Wpisują Państwo swoje nazwy klas, w CSS zmieniają selektory na nie.

Kodują Państwo ręcznie, bez page buildera. Jeszcze prościej: od razu piszą Państwo potrzebne klasy w układzie HTML szablonu. Kod CSS ten sam, po prostu dostosowują Państwo selektory do swojego układu.

Bloków nie jest dwa, a trzy lub więcej. Dodają Państwo w media query regułę dla każdego bloku z jego wartością order. Na przykład: .block-a { order: 1; }, .block-b { order: 2; } i .block-c { order: 3; }. Liczby nie muszą iść po kolei, można użyć order: 10 dla gwarantowanego przesunięcia na koniec.

Proszę sprawdzić, czy kontener nadrzędny ma display: flex, bez tego order jest po cichu ignorowany i stracą Państwo pół godziny na debugowanie. Najczęstszy scenariusz: kontener ma domyślnie display: block, flex jest ustawiony, ale nadpisany przez bardziej specyficzną regułę motywu. DevTools → Computed pokaże wynikową wartość.

Proszę obejrzeć krótkie wideo na ten temat: pokazuje ono wizualnie, jak order przestawia bloki w czasie rzeczywistym:

⁉️🤔 Często zadawane pytania

Czy order działa we wszystkich przeglądarkach?

order jest wspierany przez wszystkie nowoczesne przeglądarki od 2015 roku, w tym Safari na iOS i Chrome na Androidzie. Według danych caniuse.com, globalne wsparcie flexboxa to 99,2%. Jeśli potrzebują Państwo wsparcia IE11 (rozumie on flexbox, ale z błędami), proszę dodać -ms-flex-order z tą samą wartością.

Czy order psuje indeksację przez wyszukiwarki?

Nie. Roboty wyszukiwarek czytają źródłowy HTML strony, a order zmienia tylko wizualną kolejność w przeglądarce. Google potwierdza: przestawienia CSS nie wpływają na ranking. Oryginalna kolejność treści w HTML pozostaje taka sama.

Dlaczego mój order nie działa?

Trzy najczęstsze przyczyny: (1) blok nadrzędny nie ma display: flex; (2) media query jest nadpisywane przez bardziej specyficzną regułę motywu; (3) element podrzędny ma display inny niż block (na przykład inline), staje się on i tak elementem flex, ale zachowanie może się różnić. Proszę otworzyć DevTools, zakładka Elements → Computed: proszę sprawdzić, czy Państwa order jest stosowany i czy nie jest przekreślony.

Czy można zmieniać kolejność przez CSS Grid zamiast flexbox?

Tak. W Grid istnieje właściwość order, która działa identycznie. Ponadto Grid oferuje alternatywę: można ustawić grid-row i grid-column dla jawnego pozycjonowania elementów bez order. Ale jeśli mają Państwo po prostu wiersz z dwiema kolumnami, flexbox jest prostszy, mniej kodu.

Co robić, jeśli page builder nie pozwala dodać swojej klasy?

Niektóre stare lub okrojone buildery nie pokazują pola CSS Class. W takim przypadku: (1) proszę owinąć sekcję w grupę i nadać klasę grupie; (2) użyć gotowego selektora CSS buildera (na przykład .kc-column-12a3b dla King Composer), znaleźć go przez DevTools; (3) przełączyć się na Gutenberg z grupą-kontenerem, tam pole „Additional CSS Class" jest w każdym bloku na prawym panelu.

Co zapamiętać o zmianie kolejności bloków

Właściwość CSS order to najłatwiejszy sposób zarządzania wizualną kolejnością bloków bez edycji HTML. Elastyczność osiąga się trzema linijkami w media query: nadali Państwo kontenerowi display: flex, zapisali order: 1 i order: 2 dla bloków podrzędnych na mobilnym breakpoincie, gotowe.

Najpewniejsza ścieżka wdrożenia: proszę dodawać CSS przez Appearance → Customize → Additional CSS lub wtyczkę Code Snippets, nie ruszać plików motywu. Przed publikacją proszę sprawdzić stronę przez DevTools na emulatorze iPhone'a i rzeczywistym urządzeniu. Jeśli order milczy, w pierwszej kolejności proszę spojrzeć na wartość Computed display kontenera.

Próbowali Państwo tej metody na swojej stronie? Proszę napisać w komentarzach, z jakim page builderem Państwo pracowali i co zamieniali miejscami.