Skifta ordning main och aside

När man stackar kolumnerna så är det ofta önskvärt att main alltid kommer först. Det är ju huvudinnehållet på sidan. Vi kan åstadkomma detta med hjälp av order i CSS Flexbox.

Skifta ordning med order i 2-kolumners layout

Så här kan vi uppdatera vår CSS för att alltid ha main först när kolumnerna stackas. Vi börjar med den regeln som hanterar brytpunkten för 2-kolumners layouten.

@media (max-width: 700px) {
  .cols-2 { flex-wrap: wrap; }
  .cols-2 .main  { order: 1; }
  .cols-2 .aside { order: 2; }
}

Så här ser det ut när vi laddar om sidan i webbläsaren.

Image description — Bild: Nu bytte vi ordning på aside-left och main så att main alltid hamnar först.

Skifta ordning med order i 3-kolumners layout

Vi gör samma sak för 3-kolumners layouten. Här vill vi att main alltid skall komma först, sedan aside-left och sist aside-right.

@media (max-width: 650px) {
  .cols-3 { flex-wrap: wrap; }
  .cols-3 .aside { flex: 1 1 100%; }

  .cols-3 .main        { order: 1; }
  .cols-3 .aside.left  { order: 2; }
  .cols-3 .aside.right { order: 3; }
}

Så här ser det ut när vi laddar om sidan i webbläsaren.

Layoutmodellen flexbox erbjuder oss flera möjligheter att skifta ordning på element. Vi kan t.ex. använda negativa värden för order för att flytta ett element längre fram i ordningen.

Det kan vara bra att känna till att skifta ordning med order kan påverka tillgängligheten. Skärmläsare läser innehållet i den ordning det finns i HTML-koden, inte i den visuella ordningen som order skapar. Därför är det viktigt att se till att HTML-strukturen är logisk och meningsfull även utan CSS. Det är också bra att testa med skärmläsare för att säkerställa att innehållet är tillgängligt för alla användare.