Responsive Webdesign - Sections Grid 4 Columns

[WebmanInSpace]

Hallo zusammen

Ich kenne mich mit HTML und CSS eigentlich nicht schlecht aus, auch Responsive Webdesign habe ich schon mehr mals angewendet.

Jedoch bleibt mir eine Frage offen: Wie realisiert man ein solches ( http://themes.simonbouchard.com/studio8/works/4-columns/ ) System, welches:

1. Vier sections (oder divs) nebeneinander anzeigt ...
2. ... ab einer gewissen browser-width nur noch zwei nebeneinander anzeigt ...
3. ... ganz am Schluss (mobile device) alle untereinander anzeigt?

Ich habe schon sehr viele Foren über dieses Thema durchgelesen. Doch auch durch selber probieren, habe ich Punkt 2 nie zum laufen gebracht!

Und bitte fragt mich nicht ob ich mein Code poste, denn wie gesagt, ich habe es nicht hingebracht. Unter folgendem Link habe ich teilweise eine Lösung gefunden, doch wie kann man diese an meinen Wunsch optimieren?

Ich wäre euch sehr dankbar.

LG WIS

 

[WebmanInSpace]

Sorry! Ich habe den zweiten Link noch vergessen: http://xhtmlforum.de/71919-drei-responsive-boxen-divs-zentriert-nebeneinander.html:

 

[Myhar]

Ganz einfach mit mediaqueries. Obwohl bei deinem Beispiel auch noch Javascript dabei ist.
Bei einer gewissen Größe vergibst du width: 25%, dann width 50% und dann width: 100%. Wo ist hier das Problem?

 

[WebmanInSpace]

Ja stimmt, tönt wirklich simpel und einleuchtend!

Zu diesem Thema habe ich trotzdem noch eine Frage. Wie kann man machen, dass ein Container den Platz von mehreren Container einnimmt? (wie ich das in einem Bild dargestellt habe)

Ich möchte das ganze über PHP erweitern können, der HTML-Code sollte deshalb nicht zu komplex werden!

Vielen Dank

 

[Myhar]

dein Bild fehlt.

 

[WebmanInSpace]

Irgendwie funktionierte es nicht so wie es beschrieben ist. Ich sende einfach einmal den Link zum Bild:

 

[Myhar]

Ja dann musst du einzelne "rows" erstellen und dann eben für die einzelnen Elemente eine spezielle Klasse vergeben damit du diese dann im CSS auf width: 25% oder so stellen kannst.
Schau dir auch bootstrap an, hier sei auch auf das Beispiel von ihnen verwiesen.

 

[WebmanInSpace]

Vielen Dank ich werde diesen Link in den nächsten Tagen durchlesen.