Verschieben der linksten Spalte in einem responsiven Design

Question

Ich arbeite daran, das Design der Website meiner College-Zeitung neu zu gestalten und habe das Design so angepasst, dass es gut auf einem iPad passt. Jetzt versuche ich, es auf ein einspaltiges Layout (für Smartphones) umzustellen.

Das Problem ist, dass im einspaltigen Layout die rechte Spalte über der linken Spalte stehen muss. Ich wüsste, wie ich das machen könnte, wenn der Code für die rechte Spalte vor der linken Spalte geschrieben worden wäre, aber leider ist dem nicht so.

Wie kann ich die linke Spalte unter die rechte Spalte verschieben? Muss ich Javascript verwenden, um die Spaltenreihenfolge im HTML-Code zu ändern? Vielen Dank!

EDIT: Mir ist klar geworden, dass ich ein DIV haben kann, das unsichtbar ist, wenn die Breite > einigerZahl. Ich würde es jedoch vorziehen, nicht redundant zu sein...

Answer 1

Die CSS-only-Lösung besteht darin, mit dem kleinsten Bildschirm als Standarddesign zu beginnen und dann bei zunehmender Bildschirmgröße mit Media Queries zu verbessern. Wenn Sie zuerst mit dem kleinsten Bildschirm beginnen, wird Ihre Markierung in der richtigen Reihenfolge platziert - für das obige Bild Banner, primäre Navigation, Hauptinhalt (rechte Spalte), Nebeninhalt (linke Spalte) und (vermutlich) Footer. Wenn die Media Queries zusätzliches CSS anwenden, können Sie dann den Hauptinhalt rechts und den Seiteninhalt links floaten lassen - die Elemente sind korrekt positioniert für kleinere oder größere Bildschirme.

Answer 2

CSS kann Elemente aus dem Dokumentenfluss nehmen und sie beliebig platzieren, auf jede gewünschte Weise. Aber es kann keinen neuen Dokumentenfluss erstellen (dh es kann Elemente nicht neu anordnen). Sie müssen ein Element relativ zum anderen positionieren oder beide absolut positionieren.

Wenn Sie auf JavaScript zugreifen können und sich nicht um eine sanfte Degradierung kümmern, könnten Sie auch das .innerHTML der beiden divs austauschen.

Answer 3

Der einfachste Weg, den ich mir vorstellen kann, dies zu tun, ist mit jQuery (einer JavaScript-Bibliothek), um den Inhalt der rechten Spalte von einem div in ein anderes im DOM zu verschieben. Dies ermöglicht es Ihnen, die div's dynamisch zu erstellen und zu entfernen, sodass es am Ende keine Redundanz gibt.

Wenn dies zu vage ist, kommentieren Sie und ich werde ein Beispiel hinzufügen.