Bootstrap 2 grid options (from Bootstrap 3)

1-extract-breakpoint.less

// -----------------------------------------
// Bootstrap 2 related variables / functions
// -----------------------------------------
@mobile:  ~"(max-width: 767px)";
@tablet:  ~"(min-width: 768px) and (max-width: 979px)";
@normal:  ~"(min-width: 980px) and (max-width: 1199px)";
@wide:    ~"(min-width: 1200px)";

@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

.makeColumn(@columns: 1, @offset: 0) {
  float: left;
  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

// ------------------------
// Make new columns for BS2
// ------------------------

@breakpoint: @mobile, @tablet, @normal, @wide;
@break: xs, sm, md, lg;
@length: length(@break);

// Extract breakpoints for each grid option.
.extract-breakpoint(@breakpoint; @break; @index) when (@index > 0) {
	.extract-breakpoint(@breakpoint; @break; (@index - 1));
	
	// Get query for breakpoint.
	@bt: extract(@breakpoint, @index);

  // Define media query here because LESS is weird.
	@mediaQuery: ~"@{bt}";

	@media @mediaQuery {
		.span-extend(@break; @index);
	}
}

.extract-breakpoint(@breakpoint, @break, @length);

// Extend columns and break levels.
.span-extend(@break; @index; @c:1) when (@c =< @gridColumns) {
	.span-extend(@break, @index, (@c + 1));
	@bk: extract(@break, @index);
	.span@{c}-@{bk} {
		.makeColumn(@c);
	}
}

.extract-breakpoint(@breakpoint; @break; @length);

2-extract-breakpoint.css

@media (max-width: 767px) {
  .span12-xs {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-xs {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-xs {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-xs {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-xs {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-xs {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-xs {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-xs {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-xs {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-xs {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-xs {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-xs {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .span12-sm {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-sm {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-sm {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-sm {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-sm {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-sm {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-sm {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-sm {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-sm {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-sm {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-sm {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-sm {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  .span12-md {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-md {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-md {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-md {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-md {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-md {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-md {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-md {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-md {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-md {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-md {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-md {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 1200px) {
  .span12-lg {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-lg {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-lg {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-lg {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-lg {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-lg {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-lg {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-lg {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-lg {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-lg {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-lg {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-lg {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (max-width: 767px) {
  .span12-xs {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-xs {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-xs {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-xs {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-xs {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-xs {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-xs {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-xs {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-xs {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-xs {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-xs {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-xs {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .span12-sm {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-sm {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-sm {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-sm {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-sm {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-sm {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-sm {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-sm {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-sm {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-sm {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-sm {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-sm {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  .span12-md {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-md {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-md {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-md {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-md {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-md {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-md {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-md {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-md {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-md {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-md {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-md {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}
@media (min-width: 1200px) {
  .span12-lg {
    float: left;
    margin-left: 20px;
    width: 940px;
  }
  .span11-lg {
    float: left;
    margin-left: 20px;
    width: 860px;
  }
  .span10-lg {
    float: left;
    margin-left: 20px;
    width: 780px;
  }
  .span9-lg {
    float: left;
    margin-left: 20px;
    width: 700px;
  }
  .span8-lg {
    float: left;
    margin-left: 20px;
    width: 620px;
  }
  .span7-lg {
    float: left;
    margin-left: 20px;
    width: 540px;
  }
  .span6-lg {
    float: left;
    margin-left: 20px;
    width: 460px;
  }
  .span5-lg {
    float: left;
    margin-left: 20px;
    width: 380px;
  }
  .span4-lg {
    float: left;
    margin-left: 20px;
    width: 300px;
  }
  .span3-lg {
    float: left;
    margin-left: 20px;
    width: 220px;
  }
  .span2-lg {
    float: left;
    margin-left: 20px;
    width: 140px;
  }
  .span1-lg {
    float: left;
    margin-left: 20px;
    width: 60px;
  }
}