与CSS和Bootstrap的网格系统响应，交替divs

Question

我正在尝试创建两个div并排，重复垂直模式。一方面是包含一个图像（我已经使用CSS背景图像）和其他文本。包含图像的一面交替显示每一行。

divs使用Bootstrap网格的col-sm-6类。它在桌面上看起来很棒，但我很难在较小的设备上使它看起来不错。

的问题是，因为在代码编写，当它缩短到100％的宽度上移动是不言而喻的顺序：中 image text text image image text

代替： image text image text image text

唯一的解决办法我到目前为止，想到的是每个图像div有两个，一个在文本div之前，另一个在文本div之后，并根据屏幕的大小隐藏或显示它们。虽然不是很好的解决方案。有什么想法吗？

Answer 1

在我把他们都以相同的顺序，然后到底有什么用这个去：

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

Answer 2

把你的内容，如以下

<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> 

这会给你你想要