Responsive, alternierende divs mit CSS und Bootstrap's Grid-System

Question

Ich versuche ein Muster aus zwei Divs zu erstellen, nebeneinander, vertikal zu wiederholen. Eine Seite soll ein Bild enthalten (was ich mit CSS Hintergrundbild gemacht habe) und der andere Text. Die Seite, die das Bild enthält, wechselt jede Zeile ab.

Die divs verwenden die col-sm-6-Klasse des Bootstrap-Grids. Es sieht auf dem Desktop gut aus, aber ich habe Probleme, es auf kleineren Geräten gut aussehen zu lassen.

Das Problem ist, dass aufgrund der Reihenfolge, in der der Code geschrieben wird, wenn es auf 100% Breite kollabiert auf Handy geht es: image text text image image text

statt: image text image text image text

Die einzige Lösung I Bisher habe ich mir gedacht, zwei von jedem Bild div, eins vor und eins nach dem Text div, zu haben und sie basierend auf der Größe des Bildschirms zu verstecken oder anzuzeigen. Keine gute Lösung. Irgendwelche Gedanken?

Answer 1

Am Ende möchte ich sie alle in der gleichen Reihenfolge gebracht und dann mit diesem ging:

.campaign-idea:nth-child(odd) { 
    .image { 
    float: right; 
    } 
} 

Answer 2

setzen Sie Ihre Inhalte wie folgt

<div col-sm-6>Image</div> 
<div col-sm-6>text</div> 
<div class="clearfix visible-xs-block"></div> 
<div col-sm-6>Image</div> 
<div col-sm-6>text</div> 
<div class="clearfix visible-xs-block"></div> 
<div col-sm-6>Image</div> 
<div col-sm-6>text</div> 
<div class="clearfix visible-xs-block"></div> 

Dies wird Ihnen, was Sie