Ibland vill man positionera knappar i olika ordning beroende på hur mycket skärmyta som finns tillgängligt.

Ett typexempel är när man har formulär med högerställda knappar i botten. Då vill man ofta ha den primära knappen sist och den sekundära till vänster.

Ett formulär med högerställda knappar.

Problemet är att när skärmen blir smal, som på en mobiltelefon, så hamnar den sekundära knappen före den primära vilket man absolut inte vill.

På smala skärmar hamnar den sekundära knappen först vilket blir helt fel

En enkel CSS-lösning

Det finns några olika sätt att lösa det här på men en enkel och clean lösning som vi har börjat använda oss av är att använda flexbox-egenskapen order.

I HTML-strukturen vill vi helst lägga den primära knappen först eftersom den då  naturligt ligger rätt i tab-ordningen vilket är bra när man använder tangentbordet för att hoppa mellan fält. Det är också en fördel om man är synskadad och använder en skärmläsare eller om laddningen av CSS-filen inte fungerar. 

HTML strukturen ser alltså ut något sånt här:

<div>
  <button type="submit">Uppdatera kategori</a>
  <a href="/categories">Avbryt</a>
</div>

CSS-koden ser ut så här först.

.form-actions .button {
  display: block;
  width: 100%;
}

Det gör att formuläret kommer att se ut så här i smalt läge, vilket är precis vad vi vill:

Den primära knappen kommer först, precis som vi vill ha det

Flexbox magic

För att få knapparna att högerställas och att komma i motsatt ordning när skärmytan är större behöver vi lägga till en brytpunkt och lite  flexbox magic i form av regeln order. I det här fallet sätter vi brytpunkten till 400 px.


@media only screen and (min-width : 400px) {
  .form-actions {
    display: flex;
    justify-content: flex-end;
  }
  .form-actions .button.is-secondary {
    order: 1
  }
  .form-actions .button.is-primary {
    order: 2
  }
}

Det här kommer att resultera i att den sekundära knappen kommer först och den primära sist, vilket är precis vad vi vill. Voilà!