Ich bin auf der Suche nach einer Möglichkeit, in Bootstrap 3 alternierende Zeilenfarben in einem reaktionsschnellen Layout zu erstellen. Ich kann nicht herausfinden, wie dies ohne jede Menge umfangreiches, verwirrendes CSS möglich ist, und habe gehofft, dass jemand eine bessere Lösung hat.

Hier ist die einfache Prämisse: 12 Divs, die auf großen Bildschirmen als 4 Zeilen zu 3, auf kleinen Bildschirmen als 6 Zeilen zu 2 und auf Mobilgeräten als 12 Zeilen zu 1 angezeigt werden. Die Zeilen müssen unabhängig von der Bildschirmgröße unterschiedliche Hintergrundfarben haben.

Der HTML-Code für Bootstrap 3 lautet wie folgt:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-01</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-02</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-03</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-04</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-05</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-06</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-07</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-08</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-09</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-10</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-11</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-12</div>
    </div>
</div>

Alle Gedanken / Hinweise / Hilfe wäre sehr dankbar.