Hallo liebe Community,
ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.
Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.
Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.
Wie lässt sich das realisieren?
Hier mal ein bisschen Code, sehr reduziert.
Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.
Danke :)
<div class="container">
<div class="row">
<div class="col-lg-9">
<h3>Überschrift</h3>
<p>Lorem ipsum dolor.</p>
</div>
<div class="col-lg-3">
<img src="img/platzhalter.jpg">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img src="img/platzhalter.jpg">
</div>
<div class="col-lg-9">
<h3>Überschrift</h3>
<p>Lorem ipsum dolor sit.</p>
</div>
</div>
</div>