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

這會給你你想要