Problem z wyświetlaniem lewej kolumny na urządzeniach mobilnych

[tetrus]

Proszę o radę, jak zrobić, aby lista artykułów np. na stronie http://www.tetraplegik.pl/wozek.html która w wersji desktopowej jest po lewej stronie, w wersji mobilnej była nad artykułami. Obecnie ta lista na smartfonach jest poniżej artykułu.
Oczywiście dokładnie sprawdziłem wszystkie opcje szablonu, pliki css i javascript. Gdzie mogę znaleźć fragment kodu, który odpowiada za umieszczenie lewej kolumny pod contentem w wersji mobilnej tego szablonu lub jak wymusić, aby ta lista wyświetlana była nad artykułami?

[siristru]

Tak niestety bez sensu zbudowany jest ten szablon: http://prntscr.com/rwnfx1.
Faktycznie w kodzie pole centralne jest NAD modułem po lewej.
Wyświetla się do dzięki float i negatywnemu marginesowi.

Nie najlepiej jest to rozwiązane. W Bootstrap jest to o wiele bardziej czytelne i sensowniejsze: co po lewej będzie nad centrum a co po prawej pod centrum.

Albo inny szablon zastosujesz albo mocno do przerobienia.

[tetrus]

Dzięki za odpowiedź. Wystarczy pokombinować w samym css-ie, czy jeszcze szukać trzeba gdzieś indziej?

[siristru]

Można... ale to będzie malowanie trupa:


#s5_center_column_wrap_inner {
margin: 0px !important;
margin-top: 0px;
margin-top: 500px !important;
left: 0;
}
#s5_center_column_wrap {
position: relative;
left: 0;
float: none;
}
#s5_left_column_wrap {
margin-right: 0px !important;
position: absolute;
top: 0;
}

Drewniane rozwiązanie na pozycję absolutną i odsunięcie części centralnej o określony margines. http://prntscr.com/rwphqh

Ja zmieni się zawartość (wysokość) modułu to zacznie przykrywać treść... dlatego jest to słabe, bo sztywne, rozwiązanie. Najlepiej byłoby zastosować szablon który jest zrobiony rozsądnie i przewidywalnie.

[tetrus]

To rozwiązanie jest dla mnie satysfakcjonujące, tylko nie działa prawidłowo dla wersji mobilnej poniżej 579px http://tetraplegik.pl/wozek.html
Zależy mi, aby dla wersji desktopowej szablon działał po staremu, a lewa kolumna była nad contentem tylko w wersji mobilnej.
Obecnie lewa kolumna, która jest na górze zasłania część artykułu. Jak zrobić, żeby lista spychała artykuł niżej. Nie można tego zrobić na sztywno, bo różne listy mają różną liczbę artykułów.

[siristru]

Zależy mi, aby dla wersji desktopowej szablon działał po staremu, a lewa kolumna była nad contentem tylko w wersji mobilnej.

No od tego są punkty łamania. Kod który podałem musisz sobie umieścić w odpowiednich punktach łamania: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp


Obecnie lewa kolumna, która jest na górze zasłania część artykułu. Jak zrobić, żeby lista spychała artykuł niżej. Nie można tego zrobić na sztywno, bo różne listy mają różną liczbę artykułów.

Wyjaśniałem: struktura twojej strony taka jest - środkowa część jest w kodzie NAD lewą. Pisałem o "drewnianym" rozwiązaniu bo nadaniu pozycji absolutnej części lewej i że może przykrywać część główną. Nie zrobisz by "spychała" część główna bo w kodzie są odwrotnie. Przeczytaj proszę jeszcze raz moja wypowiedź :)

[tetrus]

Oczywiście umieściłem Twój kod w odpowiednim punkcie łamania.
Dziękuję, że uzmysłowiłeś mi, że ten szablon nie można prawidłowo skonfigurować w odniesieniu do moich oczekiwań.

[siristru]

Hej, ale jeszcze drążąc temat znalazłem lepsze rozwiązanie :) Pomocny okaże się flexbox :)

Zobacz tą poradę: https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

Sprawdziłem i działa wyśmienicie.

[tetrus]

Rzeczywiście flexbox okazał się zbawieniem. Działa wyśmienicie.
Dzięki wielkie za pomoc. Pozdrawiam :)