Making multiple columns out of an unordered list

columns.scss

// FLEXIBLE 3 COL ====================
$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;
  }
}

// FLEXIBLE 2 COL ====================
.span2 {
  display: block;
  @media (min-width: $bp-wide) {
    // 2 col
    float: left;
    margin-right: 2%;
    width: 48%;
  }
}
// first of 2
.span2:nth-child(2n+1) {
  @media (min-width: $bp-wide) {
    clear: left;
  }
}
// last of 2
.span2:nth-child(2n) {
  @media (min-width: $bp-wide) {
    margin-right: 0;
  }
}