div-Container positionieren bei kleinerem Screen

[Doli]

Hallo zusammen

Eine Frage an Euch:
Ich habe 3 div's nebeneinander: [div1] [div2] [div3]
div1 und div3 sind eine Art Skyscraper, div2 enthält den Content.

Gibt es mit CSS die Möglichkeit, div3 unter div1 zu setzen, wenn der Besucher mit einem mobilen Device (Tablet) auf die Seite kommt? Also ein Wechsel zu einem 2spaltigen Layout, die beiden Skyscraper untereinander und den Content rechts daneben?
Oder muss ich speziell für mobile Geräte eine eigene css schreiben?

Danke sehr schonmal im voraus für Eure Tipps.

 

[woffi]

Naja, extra-CSS für mobile Geräte ist sozusagen die normale Lösung. Du bindest das CSS mit soetwas ein:
<link href="mobil.css" type="text/css" rel="stylesheet" media="only screen and (max-width: 300px)" />

 

[hub]

Moin moin,
einmal kannst mit min-width eine Mindestgröße angeben, dann bricht es automatisch um wenn es eng wird, oder du arbeitest mit media querys oder du machst es, wie woffi es schreibt ...

Gruß Ulli

 

[Jormungand]

Wenn du dich näher damit auseinandersetzen willst, wäre dein Suchwort "responsive webdesign". Je nach Größe des Viewports werden die Container schmaler oder brechen um.
Eine eigene CSS-Datei ist für diese Methode nicht nötig.

 

[cythux]

Mittels Mediaqueries, könntest du Flexbox nutzen
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

 

[Doli]

Danke Euch für die Antworten. Ich schau mir das mit Deinen Links mal an, cythux. Sonst komm ich wohl nicht drum herum, eine css für mobile Geräte zu schreiben.

 

[cythux]

Danke Euch für die Antworten. Ich schau mir das mit Deinen Links mal an, cythux. Sonst komm ich wohl nicht drum herum, eine css für mobile Geräte zu schreiben.

Du brauchst keine extra CSS zu schreiben, diese kannst du in deiner vorhanden CSS intergieren wie hier zb