Hallo allerseits,
ein ganz einfaches Szenario. Ich habe zwei Reihen, in der ersten links ein Bild-Widget und rechts ein Text-Widget. In der zweiten Reihe ist es genau umgekehrt: links das Text-Widget und rechts das Bild-Widget.
Bild | Text
Text | Bild
Kommt es in der mobilen Ansicht nun zur einspaltigen Anzeige, werden die einzelnen Artikel untereinander in der Reihenfolge
Bild
Text
Text
Bild
angeordnet, was nicht sonderlich überrascht.
Überrascht war ich hingegen beim Spiel mit den beiden Design-Blocks „Text rechts, breites Bild links“ und „Text links, breites Bild rechts“. Diese werden in der mobilen Ansicht immer mit dem Bild beginnend dargestellt, egal ob das Bild in der Desktop-Ansicht links oder rechts steht. Dieses mitdenkende Verhalten ist wohl den Klassen zpWideImage und zpWideImageLeft bzw. zpWideImageRight zu verdanken. Das würde ich in meinem Projekt auch gerne erreichen. Allerdings ohne Verwendung der Design-Blocks oder zumindest ohne ein „wide image“, bei dem das eigentlich Bild ja beschnitten wird.
Zwei Stunden später …
Nach vielen gescheiterten Versuchen scheint der Groschen gefallen zu sein und ich habe jetzt eine Klasse
<style>
media (max-width: 479px){
.Bildoben {
flex-direction: column-reverse;
}
}
</style>
angelegt und in der Darstellungsansicht einer Reihe zugewiesen. Und es funktioniert zumindest in der Voransicht im Browser.
Ist diese Vorgehensweise korrekt oder gibt es noch ein elegantere Möglichkeit?
Sind die Angaben zum Breakpoint schlüssig?
Viele Grüße
Tom
