Anordnung auf dem Handy recht blöd

[stobi_de]

https://www.afripix.de/sws

So auf dem PC ist das ja ganz nett, mal das Bild links, mal das Bild rechts.
Auf dem Handy wird das dann aber direkt unbrauchbar, da der Text dann mal über und mal unter dem Bild steht.
Mit row-reverse ist da nix zu machen, weil alle Elemente in einer Row stehen.
Die Text-Elemente doppelt halten und mal einschalten und ausschalten je nach Auflösung gefällt mir auch nicht, weil Änderungen in Zukunft dann oft vergessen werden.

Ich würde jetzt jedes Element (Bild + Text) in eine Row machen. Aber für meine Bildung: gibt es noch eine andere Möglichkeit?

Frank

[Tommy Herrmann]

Na ja - nee,

die Bootstrap class="flex-row-reverse" ist doch richtig dafür. Dafür müssen die Elemente sogar in der gleichen "row" (Reihe) stehen.

... oder Du gibst der class="row" noch diese Attribute.

Code: Alles auswählen

.row {
  flex-direction: row-reverse;
}

[stobi_de]

Na ja, es darf aber auf dem Handy nur jedes zweite Element umgedreht werden.
Aber auch da gab es doch irgendwas mit even und odd.

[Tommy Herrmann]

Ich habe für mein Beispiel jetzt zwei vorhandene Mobirise-Blöcke aus dem Standard-Thema "Mobirise5" verwendet - siehe Screenshot:

Mit anderen Worten, das "row-reverse" findet bereits am Desktop-Display statt, dadurch seht dann am Handy immer das Bild oben, also bei jedem zweiten Block. Im zweiten (unteren) Block, mit den drei Hochhäusern, steht das "row-reverse" im "CSS Editor".

[stobi_de]

Du hast jetzt für Deine Elemente jeweils eine eigene Row.
Dieses Konstrukt was bei mir drin ist, hat jedoch ALLE Elemente in einer Row.
Also müsste das Reverse nur auf die gerade oder ungeraden Elemente der Aufzählung angewendet werden.
Ist ja nicht etwa so, dass ich es verkomplizieren will, aber das mit dem even und odd ist so eine Sache, ich ich gerade nicht im Griff habe

[Tommy Herrmann]

Nee - das ist natürlich nur eine Reihe (row), das <div> ganz außen - sonst ginge das doch mit der "flex" Anweisung überhaupt nicht - hier habe ich jetzt auch mal die

class="flex-row-reverse"

direkt mit ran geschrieben:

<div class="row flex-row-reverse align-items-center">
<div class="col-12 col-lg-{{textWidth}}">
<div class="image-wrapper">
<img src="../_images/hightlights/5.jpg" alt="Mobirise Website Builder">
<p class="mbr-description mbr-fonts-style mt-2 align-center" mbr-theme-style="display-4" mbr-if="showDescription" data-app-selector=".mbr-description">
Image Description</p>
</div>
</div>
<div class="col-12" mbr-class="{'col-lg' : !fullWidth, 'col-lg-4' : fullWidth &amp;&amp; textWidth >= 6, 'col-lg-6' : fullWidth &amp;&amp; textWidth <= 5}">
<div class="text-wrapper">
<h3 class="mbr-section-title mbr-fonts-style mb-3" data-app-selector=".mbr-section-title" mbr-theme-style="display-5" mbr-if="showTitle">
<b>Image with Description</b></h3>
<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text">
Use Mobirise website building software to create multiple sites for commercial and non-profit projects. Click on the image in this block to replace it. You can add a description below your image, or on the side. If you want to hide some of the text fields, open the Block parameters, and uncheck relevant options.</p>
</div>
</div>
</div>

Warum versuchst Du das nicht genau so? Das geht doch!

Das Prinzip ist doch immer von links nach rechts, von oben nach unten.

Sitzt das Bild zuerst im Quelltext, wird es links angezeigt und dementsprechend der Text rechts daneben. Am Handy dann entsprechend das Bild zuerst und darunter der Text. Am Handy wirkt dieses Flex-Element ja nicht mehr, da das Bild die gesamte Breite in Anspruch nimmt. Das Bild bleibt aber im Quelltext links, daher dann am Handy auch oben. Das Bild wird am Desktop ja nur rechts angezeigt aufgrund dieser Flex-Position.

Das kann man bestimmt mit jedem dieser Blöcke machen. Wichtig ist nur, dass das Bild im Code zuerst, also oben, steht, damit es am Handy auch immer über dem Text erscheint.

[stobi_de]

Ok, bin gerade etwas schwer von Begriff.
Im Debugger sehe ich die beiden Elemente mit Text und Bild jeweils als eigene Section.
Text und Bild stehen natürlich in einer Row, aber nicht beide Bilder und beide Texte.

[Tommy Herrmann]

Moin,

nee, das sind ja 2 Blöcke, im Prinzip 2 x der gleiche Block nur eben einmal mit der Anweisung "flex-row-reverse".

Jeder Mobirise-Block besitzt grundsätzlich immer nur eine <section>.

Daher kann man dann auch beliebig viele Blöcke einsetzen, die am Desktop die Seiten wechseln, am Handy aber das Bild immer oben anzeigen werden.

[stobi_de]

Ich hatte zunächst versucht, das Reverse für die Handydarstellung einzubauen und hatte mich dann gewundert, dass auf dem handy die Reihenfolge nicht geändert wird, also das Bild oben statt unten.
Aber man muss es halt für den PC "reversen", auf dem Handy sieht immer alles original aus, so als ob es kein reverse gäbe. Fiel mir dann heute nacht um 3 Uhr ein..

[Tommy Herrmann]

ja - ich denke, dass das mit der "flex" Eigenschaft zu tun hat.