Anordnung von Boxen und Umstellmöglichkeit für Mobile Ansicht

[Bexsta]

Anordnung von Boxen mit Umstellmöglichkeit für Mobile Ansicht

Hallo lieber CSS Freaks,

seit einige Zeit beschäftigt mich ein Layout, dass es mir leider nicht Möglich macht die Content Boxen ordentlich auszurichten und für die Mobile Ansicht die Reihenfolge änderbar ist.

Habe es bereits mit Flex und Grid sowie mit der OldSchool Variante Float probiert.

Dazu eine kleine Grafik:



1 die Höhe ist nicht bekannt weil vom Content abhängig
2 die Höhe ist auch nicht bekannt
3 height und width sind bekannt

in der Mobilen Ansicht rutscht Item 2 auf Platz 1 und 1 und 3 sind 2 und 3, wie ja zusehen.

Mit Grid war es mir überhaupt nicht möglich dies Umzusetzen da das Grid-System immer von Zeilen Anfang Anfängt und Box 2 eine Variable Höhe hat.
Bei Flex in der Screen Ansicht bleibt Container 3 immer unter 1 und Rutscht nicht hinter zwei nach. Dadruch das 1 keine festhöhe hat ist mir nicht möglich einen umbruch zu erzeugen das 2 und 3 rechts neben 1 wandern.
Float funktioniert jedoch scheint mir dies nicht die opimale Variante zu sein. Es gibt noch weitere Anordnungen in dem es mit Float auch nicht funktioniert.

Wenn die Grafik nicht selbsterklärend ist, kurz Bescheid geben, kann gerne eine neue hochladen.

- - - Aktualisiert - - -

Ist die Problematik blöd erläutert oder warum Antwortet niemand?

 

[mikdoe]

AW: Anordnung von Boxen mit Umstellmöglichkeit für Mobile Ansicht

Ist die Problematik blöd erläutert oder warum Antwortet niemand?

Hier ist leider nicht mehr so viel los wie früher. stack sei Dank...

 

[Bexsta]

Naja aber werden schon über 60 Hits angezeigt..glaube, es will sich keiner die Mühe machen, das mal Nachzustellen!

 

[mikdoe]

glaube, es will sich keiner die Mühe machen, das mal Nachzustellen!

Vielleicht eine Zeitfrage. Mit einem JSFiddle wäre es sicher einfacher.

 

[Bexsta]

Du hast natürlich Recht. So macht es die Sache einfacher!

Habe nun das erweiterte Layout genommen da dort die Problematik am umfangreichsten ist.
Erstmal geht es um die Anordnung der Boxen für die Screen-Ansicht. Was vielleicht erwähnt werden sollte ist, das die Boxen in der Mobilen Ansicht die Reihenfolge ändern.

Container 3 passt die Höhe an den links angrenzenden Container 1 an, hat eigentlich eine unbekannte Höhe, da dieser vom Content bestimmt werden soll.
Container 4 sollte direkt unter Con 3 erscheinen.

Zur Veranschaulichung nochmal eine Grafik.



jsfiddle

Werde das Gefühl nicht los, dass so die Konstellation nicht mit Grid umsetzbar ist, da Grid ausschließlich mit bekannten Größen arbeitet.
Jedoch ist es mit Flexbox auch nicht, soweit mir jetzt bekannt, umsetzbar, da wenn man die direction auf column umstellt, flex nicht weiß ab wann die items umgebrochen werden sollen bzw es keine festegröße für einen Umbruch gibt.

 

[kkapsner]

Soll 3 jetzt so hoch sein wie 1 oder nicht? In der Graphik sind sie nicht gleich hoch.

Soweit ich das sehe, musst du für die Mobile-Sicht nur die Reihenfolge ändern. Das kannst du mit Flexbox machen: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Die Desktop-Version ist dann die komplizierte, aber ich denke, dass du das mit Grid bauen kannst: https://jsfiddle.net/vyqmLzpo/1/