Responsive 3 column

gistfile1.txt

<ul>
    <li class="span3">
        Text
    </li>

    <li class="span3">
        Text
    </li>
    <li class="span3">
        Text
    </li>
</ul>

$em-base: 16px;
$bp-widest: 900px/$em-base + 0em;
$bp-wide: 700px/$em-base + 0em;

.span3 {
  display: block;
  @media (min-width: $bp-wide) {
    // 2 col
    float: left;
    margin-right: 2%;
    width: 48%;
  }
  @media (min-width: $bp-widest) {
    // 3 col
    width: 32%;
  }
}
// first of 2
.span3:nth-child(2n+1) {
  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
    clear: left;
  }
}
// last of 2
.span3:nth-child(2n) {
  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
    margin-right: 0;
  }
}

// first of 3
.span3:nth-child(3n+1) {
  @media (min-width: $bp-widest) {
    clear: left;
  }
}
// last of 3
.span3:nth-child(3n) {
  @media (min-width: $bp-widest) {
    margin-right: 0;
  }
}