CSS 3 -

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 {order}

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]