Bootstrap中的响应条纹

Question

我在BS3中有一个网格，可以在设备大小上有4个，2个或1个列。它的条带为4最大列宽。

<div class="row row-odd">
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row row-even">
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
  <div class="col-md-3 col-sm-6"></div>
</div>

.row-even {
  background-color: #B2D6B2;
}
.row-odd {
  background-color: #D8ECC3;
}

这个工作正常，但理想情况下我会喜欢它的条纹响应，实际上看起来很好。

前4个细胞颜色相同。我希望只有前2个或前1个单元格具有相同的颜色，具体取决于分辨率，因此它看起来条纹化为用户。

所以在4列模式中我想要颜色1（C1）和2（C2）如下

C1C1C1C1C2C2C2C2C1C1C1C1C2C2C2C2（即4个块）

并以2列模式

C1C1C2C2C1C1C2C2（即2的嵌段）

和1列模式

C1C2C1C2C1C2C1C2（即1的嵌段）

我该怎么做？

我有一个小提琴：

http://jsfiddle.net/GrimRob/1cj2e828/3/