Cacher is the code snippet organizer for pro developers

body {
  padding-top: 40px;
}

h3 {
  font-size: 16px;
}

[class^="col-"]:nth-child(odd) {
    background: #88B040;
}

[class^="col-"]:nth-child(even) {
    background: #999999;
}

p {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
  padding: 10px;
  vertically-align: middle;
}

<div class="container">
  <div class="row">
    <h3>Extra Small Devices – Mobile</h3>
    <div class="col-xs-1">
      <p>1</p>
    </div>
    <div class="col-xs-1">
      <p>2</p>
    </div>
    <div class="col-xs-1">
      <p>3</p>
    </div>
    <div class="col-xs-1">
      <p>4</p>
    </div>
    <div class="col-xs-1">
      <p>5</p>
    </div>
    <div class="col-xs-1">
      <p>6</p>
    </div>
    <div class="col-xs-1">
      <p>7</p>
    </div>
    <div class="col-xs-1">
      <p>8</p>
    </div>
    <div class="col-xs-1">
      <p>9</p>
    </div>
    <div class="col-xs-1">
      <p>10</p>
    </div>
    <div class="col-xs-1">
      <p>11</p>
    </div>
    <div class="col-xs-1">
      <p>12</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <h3>Small Devices – Tablets</h3>
    <div class="col-sm-1">
      <p>1</p>
    </div>
    <div class="col-sm-1">
      <p>2</p>
    </div>
    <div class="col-sm-1">
      <p>3</p>
    </div>
    <div class="col-sm-1">
      <p>4</p>
    </div>
    <div class="col-sm-1">
      <p>5</p>
    </div>
    <div class="col-sm-1">
      <p>6</p>
    </div>
    <div class="col-sm-1">
      <p>7</p>
    </div>
    <div class="col-sm-1">
      <p>8</p>
    </div>
    <div class="col-sm-1">
      <p>9</p>
    </div>
    <div class="col-sm-1">
      <p>10</p>
    </div>
    <div class="col-sm-1">
      <p>11</p>
    </div>
    <div class="col-sm-1">
      <p>12</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <h3>Medium Devices</h3>
    <div class="col-md-1">
      <p>1</p>
    </div>
    <div class="col-md-1">
      <p>2</p>
    </div>
    <div class="col-md-1">
      <p>3</p>
    </div>
    <div class="col-md-1">
      <p>4</p>
    </div>
    <div class="col-md-1">
      <p>5</p>
    </div>
    <div class="col-md-1">
      <p>6</p>
    </div>
    <div class="col-md-1">
      <p>7</p>
    </div>
    <div class="col-md-1">
      <p>8</p>
    </div>
    <div class="col-md-1">
      <p>9</p>
    </div>
    <div class="col-md-1">
      <p>10</p>
    </div>
    <div class="col-md-1">
      <p>11</p>
    </div>
    <div class="col-md-1">
      <p>12</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <h3>Large Devices</h3>
    <div class="col-lg-1">
      <p>1</p>
    </div>
    <div class="col-lg-1">
      <p>2</p>
    </div>
    <div class="col-lg-1">
      <p>3</p>
    </div>
    <div class="col-lg-1">
      <p>4</p>
    </div>
    <div class="col-lg-1">
      <p>5</p>
    </div>
    <div class="col-lg-1">
      <p>6</p>
    </div>
    <div class="col-lg-1">
      <p>7</p>
    </div>
    <div class="col-lg-1">
      <p>8</p>
    </div>
    <div class="col-lg-1">
      <p>9</p>
    </div>
    <div class="col-lg-1">
      <p>10</p>
    </div>
    <div class="col-lg-1">
      <p>11</p>
    </div>
    <div class="col-lg-1">
      <p>12</p>
    </div>
  </div>
</div>