Trzy sposoby na zmienianie kolejności elementów

Niekiedy zdarzają się sytuację w których layout będzie musiał zmieniać się dość drastycznie w zależności od szerokości ekranu danego urządzenia. Czasami będziesz potrzebował zmienić kolejność wyświetlania poszczególnych elementów. Jest to dość karkołomny zabieg, ale przedstawię Ci teraz 3 różne koncepcje rozwiązania takiego problemu. Na wstępie napiszę, że żadna z tych opcji nie jest w 100% idealna i każda ma swoje wady i zalety. Każdą z nich wykorzystasz również w innych sytuacjach i projektach, o czym będziesz musiał zadecydować samemu.

Wyświetlanie i ukrywanie elementów

Na pierwszy ogień idzie chyba najprostsza opcja, a mianowicie klasy.visible-*i.hidden-*stosowane m.in. w Bootstrapie. Jest to najprostsza opcja, gdyż wystarczy dopisać dla danego elementu np. klasę.visible-xsi będzie ona od tej pory widoczna tylko na najmniejszych urządzeniach. Analogicznie działałaby klasa.hidden-xs.

Co dzięki temu osiągniemy w kontekście zmiany kolejności elementów? Możesz utworzyć dany element w dwóch miejscach. W jednym nadać mu np. klasy.visible-lg,.visible-md, a w drugim.hidden-lgi.hidden-md. Dzięki czemu po prostu będziesz wyświetlał na mniejszych urządzeniach dwa różne elementy, które będą posiadały tą samą zawartość.

Wydawałoby się, że jest to opcja idealna, ale niestety tak nie jest. Nie możemy w 100% zapewnić, że zawartość obu elementów będzie taka sama. Musimy utrzymywać dwa miejsca z danymi, aby obsłużyć także mniejsze urządzenia i jest to dosyć kłopotliwa opcja, jeśli chodzi o utrzymanie kodu. Tym bardziej, jeśli szablon zostanie podpięty do dowolnego systemu CMS itp. Rodzi to wtedy różne komplikacje.

Flexbox

Kolejnym sposobem na rozwiązanie tego problemu jest użycieflexboxa. Jeszcze do niedawna nie było to takie oczywiste rozwiązanie, ponieważ flexbox nie był wspierany we wszystkich popularnych przeglądarkach. Czasy się jednak troszkę zmieniły i o ile nie potrzebujesz obsługi starych wersji Internet Explorera, to nie będziesz miał żadnego problemu wprowadzić do swojego projektu flexboxa:Wsparcie dla fexboxa.

Flexbox jest specyficznym typem wyświetlania elementów, ale dzisiaj nie zajmiemy się jego całą strukturą. Dzisiaj zajmiemy się jego jedną specyficzną właściwością, a mianowicieorder. Jest to właściwość dzięki której możemy dokładnie określić kolejność wyświetlania elementów. Robi się to w następujący sposób:

Musisz jednak pamiętać o tym, że element nadrzędny musi mieć ustawionedisplay: flex;. W innym przypadku powyższy kod nie zadziała.

Wydawałoby się, że to rozwiązanie jest idealne. Jak możesz się jednak spodziewać, tak nie jest. Dosyć mała popularność flexboxa nie jest dużym problemem. Znacznie większym problemem jest brak wsparcia ze strony Safari i iOS. Niestety jest to znaczący problem, dlatego rzadko korzysta się z tego rozwiązania.

Wyświetlanie tabelaryczne

Ostatnim rozwiązaniem jest użycie innego typu wyświetlania. Jest ono najbardziej niedoskonałe ze wszystkich, które tu przedstawiam. Dziękidisplay: table-header-group, bo właśnie o tym mowa, możemy ustawić element jako pierwszy wśród dzieci danego kontenera. Drugą możliwością jesttable-footer-group, który ustawia nam element na ostatnim miejscu. Nie mamy takiej dowolności jak w poprzednich przykładach. Dodatkowo nie jest to najlepsza metoda, gdyż używamy w niej wyświetlania tabelarycznego.

Zadanie 1

Twoim celem w tym zadaniu jest dodać klasyvisible-*lubhidden-*tak, aby sekcja.developerbyła widoczna tylko na urządzeniach bardzo małych.

Rozwiąż zadanie

Podsumowanie

Jak widzisz żadna z powyższych metod nie jest idealna. Ze swojej strony polecałbym jednak próbować unikać sytuacji w których wymuszamy zmianę kolejności wyświetlania elementów w dowolny sposób. Jeśli jednak już musisz to zrobić, to polecałbym chyba pierwszą opcję, którą tutaj opisałem.

W tej lekcji poznałeś 3 metody na zmianę kolejności wyświetlania elementów w zależności od szerokości ekranu urządzenia. Dowiedziałeś się także, że żadna z tych metod nie jest niestety metodą idealną. Wszystkie mają swoje wady i zalety. Zapraszam Cię do następnej lekcji w której poznasz sposób na responsywną tabelę.