(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)
selektor { order: kolejność }Możliwość swobodnego ustalania kolejności wyświetlania się elementów to następna duża zaleta układu elastycznego. Przy wstawiania znaczników HTML do kodu źródłowego już nie musimy się martwić, aby były one osadzone w kolejności odpowiedniej do ich poprawnego wyświetlenia - zgodnie z zaprojektowaną grafiką serwisu.
Dzięki temu możemy tworzyć bardziej dostępne dokumenty. Przykładowo dla osoby niewidomej, która używa przeglądarki z syntezatorem mowy, prawdopodobnie korzystniej będzie, jeśli zapoznając się z katalogiem produktów w sklepie internetowym, najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order: -1", wyświetlimy go na początku, podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną spełnione.
Przykład:
Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy.
<div id="top"> <div id="TRESC">Treść strony...</div> <div id="MENU">Menu nawigacyjne</div> </div>
#top {
display: flex;
}
#MENU {
width: 150px;
min-width: 150px;
order: -1;
}[porównaj: Płynny szablon]