[jaskowice1]

Mireczki jak zrobić coś takiego na bootstrapie? Przedstawiłem to na tym rysunku.

Mam taki układ strony jak na obrazku nr 1) desktop i po zmniejszeniu do mobilnych mam coś takiego jak na rysunku 2) mobile :/ A chcę żeby było tak jak na 3) mobile... :/

CONTENT

MENU

Mam tak zrobione, jak to można zrobić inaczej?

#boostrap #webdev #html

[xcccx]

@jaskowice1: przejść na flexboxa (np. bootstrap 4) i mieć w dupie ie < 10

[jaskowice1]

@xcccx: mam w dupie ie <10 :-) flexbox - ok dzięki zaraz zobaczę :-)

[jaskowice1]

@xcccx: Bo jakieś rozwiązanie dla Bootstrap v3.3.1? Inne niż flexbox?

[jaskowice1]

Wołam eksperta :-) @rbielawski

[xcccx]

@jaskowice1: jak nie wspierasz IE<10 to od razu flexbox. Imho nie warto kombinować i robić syf kiedy flexboxem można to bez problemu otrzymać, i tak chyba wszystkie frameworki przechodzą/przeszły już na flexboxa bo ileż można floatować.

[rybiksystemowy]

@jaskowice1: spróbuj pull push http://getbootstrap.com/css/#grid-column-ordering

[marcinzwwa]

@jaskowice1: ehhh niewspieranie ie10, jakie to fajne :( anyway, na ie11 tez cos z flexboxem jest chyba nie do konca tak... http://caniuse.com/#feat=flexbox

[xcccx]

@marcinzwwa: prefix i bugi, ale akurat flexbox-order zdaje się wspierać

[r.....a]

@jaskowice1: Możesz zrobić dodatkowe menu które będzie widoczne tylko dla widoku mobilnego, tylko nie za bardzo wiem czy to jest dobra praktyka.

[jaskowice1]

@ratunkowa-plyta-chodnikowa: tak raczej nie będę robić :p

[epi]

@jaskowice1: próbowałeś to?
http://getbootstrap.com/css/#grid-column-ordering

edit: o, ktoś już to sugerował wyzej ;)

[vibro_vagins]

@jaskowice1: https://jsfiddle.net/fgm6dg7q/

[Chanandler]

@jaskowice1: nie rozumiem 2 i 3, kiedy jaki wynik chcesz otrzymać?

[jaskowice1]

@vibro_vagins: Prawie oto chodzi, dokładnie to żeby menu było na samym dole :)

[jaskowice1]

@Chanandler: Takie coś jak napisał @vibro_vagins tylko, żeby menu było na samym dole.

[vibro_vagins]

@jaskowice1: aaa, nie doczytałem :D no to chyba słabo będzie uzyskać taki efekt przez ordering

[Chanandler]

@jaskowice1: wydaje mi się, że jest to nierealne do zrobienia bez flexboxa i order. Jeśli rzeczywiście nie potrzebujesz ie <= 9 to nie masz sie co zastanawiac, tylko musisz pamiętać o odpowiednich prefixach bo te są nadal wymagane.

[jaskowice1]

@Chanandler: @vibro_vagins: @epi: @xcccx: @marcinzwwa: Coś mi nie wychodzi dla media queries :/

https://jsfiddle.net/fgm6dg7q/2/

[jaskowice1]

@Chanandler: @vibro_vagins: @epi: @xcccx: @marcinzwwa: Udało sie, dodałem flex-flow: row wrap;

Dzięki za pomoc :)

[Chanandler]

@jaskowice1: dokładnie flex wrap albo krótsza forma flex flow jak podałeś http://codepen.io/anon/pen/mVOyBE i te klasy bootstrapowe to sobie już daruj