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.