Ustawianie divów w wersji mobilnej

pytanie zadane 17 lipca 2017 w HTML i CSS przez leemish Użytkownik (780 p.)

Drodzy koledzy, jak tu zrobić taki myk, aby w wersji mobilnej div fonticon był nad divem right?

i takie drugie pytanko przy okazji, jeśli div right ma text-align: right; to jak ustawić domyślnie text-align: left; dla wersji mobilnej?

PS: oczywiście bootstrap podpięty wszystko śmiga tylko kwestia poukładania tych divów
Pozdro!

<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="right">
<h2>lorem ipsum</h2>

<p>lorem ipsum lorem ipsum</p>
</div>
</div>

<div class="col-md-4 col-sm-4 col-xs-12">

<div class="fonticon"><i class="icon-magnet"></i></div>

</div>

</div>
</body>

2 odpowiedzi

odpowiedź 18 lipca 2017 przez szustka124 Gaduła (4,380 p.)
edycja 18 lipca 2017 przez szustka124

Możesz ustawić w JS przypięcie do odpowiedniego rodzica w zależności od rozdzielczości.
Pomoc dla JQuery:
szerokość okna - $(document).width(); //dla mobile < 768px
dodanie elementu - http://api.jquery.com/appendto/

A co do drugiego pytania:
(Był link do W3S) https://developer.mozilla.org/en-US/docs/Web/CSS/@media

komentarz 18 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
edycja 18 lipca 2017 przez xmentor

A czemu nie napisałeś pomocy dla pure JS? No i da się to w CSS: https://jsfiddle.net/nfk30x3a/ (wystarczy zmniejszyć obszar z podglądem).

https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy?show=34559#q34559

Linkujmy normalne źródła wiedzy np. z MDN.

komentarz 18 lipca 2017 przez szustka124 Gaduła (4,380 p.)

O flex nie pomyślałem :) Przez cały czas robiłem tylko tak.
Co do W3S, będę się stosować. Dzięki

odpowiedź 18 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 18 lipca 2017 przez JayJay

W Bootstrap'ie masz taką właściwość Column ordering

https://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap

W kodzie html najpierw układasz div'y w takiej kolejności, w jakiej mają być rozmieszczone w wersji mobilnej. Następnie za pomocą klas Bootstrap'a nadajesz im odpowiednie rozmiary dla większych ekranów, a na koniec korzystając z pull i push zmieniasz ich kolejność na właściwą dla większych ekranów.

komentarz 18 lipca 2017 przez leemish Użytkownik (780 p.)

					  <div class="row">
					  
				    <div class="col-md-4 push-md-4 col-sm-4 push-md-4 col-xs-12 push-xs-12">

					<div class="fonticon"><i class="icon-sort-name-up"></i></div>

					</div>		  
					  
				 <div class="col-md-8  col-sm-8 col-xs-12">
				<div class="right">
				<h2>zaawansowane filtrowanie</h2>
s
<p>Z łatwością filtruj interesujące Cię informacje. Modyfikuj filtry w celu uzyskania idealnej grupy docelowej nowego produktu lub usługi</p>
				</div>
				</div>

Chcę aby div fonticon był po prawej stronie na dużych ekranach (md i sm) obecnie podstrona wygląda tak, że wszystko "gra" tylko w wersji mobilnej (bo poprzestawiałem divy tak aby tak działało

coś robię nie tak?

komentarz 18 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 18 lipca 2017 przez JayJay

Przede wszystkim nigdzie nie zapisałeś pull :)
Zastosowałeś też trochę złą konstrukcję: md-push-4.
Poprawna to: col-md-push-4

Za pomocą pull określamy o ile (z dwunastu jednostek Bootstrapa'a) dany div ma być przyciągnięty do lewej krawędzi.

Natomiast za pomocą push mówimy o ile (z dwunastu jednostek Bootstrapa'a) danego div'a chcemy odepchnąć od lewej krawędzi.

W ten sposób tworzy się taki mikro-mechanizm, w którym jednego div'a odpychamy od lewej krawędzie, a drugiego przyciągamy do lewej krawędzi, tym samym zamieniając je miejscami.

W twoim przypadku:

Najpierw definiujesz szerokości div'ów dla danych rozmiarów ekranów np. col-sm-4 oraz col-sm-8
Następnie zamieniasz div'y miejscami:
Określasz, o ile jednostek Bootstrap'a chcesz odepchnąć div'a nr1 od lewej krawędzi. Obecnie znajduje się 0 jednostek od lewej krawędzi. Na jego miejsce ma wejść div nr 2, którego szerokość wynosi 8 jednostek. W związku z tym, aby div nr 2 zmieścił się przed div'em nr 1 musisz wypchnąć div'a nr 1 o 8 jednostek, więc zapisujesz (przy div'ie nr 1, jako klasę): col-sm-push-8
Dalej określasz, o ile jednostek Bootstrap'a chcesz przyciągnąć drugiego div'a do lewej krawędzi. Div nr 2 znajduje się za div'em nr 1. W wyniku czego jest odsunięty od lewej krawędzi o szerokość div'a nr 1. Szerokość div'a nr 1 to 4, więc aby div nr 2 znalazł się przy lewej krawędzi bez żadnego odstępu (0 jednostek odstępu od lewej krawędzi), musisz przyciągnąć go o 4 jednostki, więc zapisujesz (przy div'ie nr 2, jako klasę): col-sm-pull-4

PS. Chyba nie domknąłeś div'a row.
Nie musisz definiować dla każdego rozmiaru ekranu szerokości div'ów. Wystarczy, że zapiszesz przy jakiej najmniejszej wielkości ekranu div ma mieć dany rozmiar np.
col-lg-4 col-md-4 col-sm-4 zmień na col-sm-4
efekt będzie ten sam, a zawsze mniej pisania :)