Swap css classes inside every Bootstrap row

Question

Please find the below code,

$scope.datas = [{name:'AB', age:1}, {name:'BC', age:2}, 
{name:'CD', age:3}, {name:'EF', age:4}, {name:'GH', age:5}, 
{name:'IJ', age:6}]

<div ng-repeat="data in datas" class="col-xs-6">
  <span>{{data.name}}</span>
  <span>{{data.age}}</span>
</div>

 .red{
   background-color: red;
  }

.green{
 background-color: green;
}

like

  red    green
  green  red
  red    green

I want to use these(red, green) classes to swap every bootstrap rows. How can we achieve this?

Answer 1

You should be using :nth-child for this, rather than extra classes.

div {
  /* formatting for the “normal” elements goes here (red)
  outline: 1px solid red;
}

div:nth-child(4n+2),  // select every 2nd
div:nth-child(4n+3) { // and 3rd out of each “group” of 4 elements
  /* formatting for the “special” elements, based on their position */
  outline: 1px solid green;
}

A simple fiddle demonstrating the principle: https://jsfiddle.net/j24yk5L5/