Bootstrap 2 and working with the grid compared to Bootstrap 3

I just inherited a project which unfortunately uses Bootstrap 2, I'm used to using Bootstrap 3 but have never worked with version 2 before.

I have done a bit of reading on the differences and as I understand it the columns work by using span* where * indicates the amount of columns you want that element to span.

However I am confused on how you can change this depending on your different breakpoints?

For example in Bootstrap 3 you can do:

col-sm-4
col-md-8

How can you change the element like that in Bootstrap 2?

Solution

You cannot! The bootstrap 3.x grid system has predefined classes for different devices - col-xs-*, .col-sm-*, .col-md-* and .col-lg-*.

Bootstrap 2.x have not. It has one system of predefined classes, made for one viewport only :

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

To achieve the same behavior in bootstrap 2.x as 3.x you must include bootstrap-responsive.css that holds hardcoded .span widths (and a lot more) for different media sizes, practically the same as col-xs-* etc :

@media (min-width: 768px) and (max-width: 979px) {
...
  .span3 {
    width: 166px;
  }
  .span2 {
    width: 104px;
  }
  .span1 {
    width: 42px;
  }
...

So in bootstrap 2.x .span1 is the same as col-xs-1, .col-sm-1, .col-md-1 and .col-lg-1 depending on the viewport, if you have bootstrap-responsive.css included.