`order` în CSS

Schimbă ordinea vizuală a unui element într-un container flex sau grid, fără să modifice HTML-ul.

Sintaxă CSS

order: 0;   /* implicit */
order: -1;  /* mută elementul la început */
order: 2;

Ce face `order`

Copiii unui container flex sau grid apar implicit în ordinea din HTML. order primește un număr întreg (implicit 0): elementele se așază crescător după acest număr, iar la valori egale rămâne ordinea din HTML.

Un număr negativ (-1) mută elementul înaintea celorlalte, un număr mai mare îl mută la final. Este util când pe telefon vrei altă ordine decât pe desktop, de exemplu imaginea deasupra textului.

Atenție: order schimbă doar ce se vede. Cititoarele de ecran și navigarea cu tasta Tab urmează în continuare ordinea din HTML, așa că nu-l folosi pentru a reorganiza conținut important.

Valori uzuale

Valoare	Descriere
`0`	Valoarea implicită pentru toate elementele.
`număr negativ`	Elementul apare înaintea celor cu valoare mai mare.
`număr pozitiv`	Elementul apare după cele cu valoare mai mică.

Exemple

Exemplul 1: Imaginea deasupra textului doar pe telefon

În HTML textul este primul (bun pentru SEO și cititoare de ecran); pe ecran îngust, imaginea urcă deasupra.

.prezentare {
  display: flex;
  gap: 24px;
}
@media (max-width: 600px) {
  .prezentare {
    flex-direction: column;
  }
  .prezentare img {
    order: -1;
  }
}

Efect vizual în browser

Pe desktop, textul despre cafeneaua din Cluj este în stânga și poza în dreapta. Pe telefon, poza apare sus, iar textul dedesubt.

Exemplul 2: Produsul recomandat mutat la începutul listei

Fără să schimbi ordinea din baza de date, cardul marcat „recomandat” apare primul în grilă.

.grila-produse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grila-produse .recomandat {
  order: -1;
  border: 2px solid #16a34a;
}