title: Alternating Row Colors in Bootstrap 3 - No Table
body: <p>I am looking for a way to do alternating row colors in a responsive layout in Bootstrap 3. I cannot figure out how to do it without a LOT of extensive, confusing CSS and was hoping that someone had a better solution.</p>
  
  <p>Here is the simple premise: 12 divs that display as 4 rows of 3 on large screens, 6 rows of 2 on small screens, and 12 rows of 1 on mobile. The rows will need to have alternating background colors regardless of screen size.</p>
  
  <p>The HTML for Bootstrap 3 is as follows:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-01&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-02&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-03&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-04&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-05&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-06&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-07&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-08&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-09&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-10&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-11&lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;Emp-12&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any thoughts/hints/help would be greatly appreciated.</p>