1. Juli 2024
So kannst du Spalten mit Bootstrap mobil in anderer Reihenfolge darstellen
Ein beliebtes Gestaltungselement im Webdesign, ist die abwechselnde Darstellung von Text und Bild in Spalten oder auf Kacheln. z.B. so:
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr labore.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr labore.
<div class="row g-0">
<div class="col-12 col-md-6">
<img src="...">
</div>
<div class="col-12 col-md-6">
<div class="p-4">
<h4>Lorem ipsum</h4>
</div>
</div>
<div class="col-12 col-md-6">
<div class="p-4 h-100">
<h4>Lorem ipsum</h4>
</div>
</div>
<div class="col-12 col-md-6">
<img src="...">
</div>
</div>
Code-Sprache: JavaScript (javascript)
Problem hierbei ist, dass die Reihenfolge in der mobilen Ansicht so etwas suboptimal ist und der zweite Text direkt unter dem ersten dargestellt wird.
Mit der Bootstrap-Klasse „order-md-2“ kann die Reihenfolge für die Desktop-Ansicht geändert werden.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr labore.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr labore.
<div class="row g-0">
<div class="col-12 col-md-6">
<img src="...">
</div>
<div class="col-12 col-md-6">
<div class="p-4">
<h4>Lorem ipsum</h4>
</div>
</div>
<div class="col-12 col-md-6 order-md-2">
<img src="...">
</div>
<div class="col-12 col-md-6 ">
<div class="p-4">
<h4>Lorem ipsum</h4>
</div>
</div>
</div>
Code-Sprache: JavaScript (javascript)
So werden die Spalten mobil abwechelnd dargestellt.
Nächster Artikel