"You have four different classes so you can have four different layouts, depending on screen size.
The key part of the Bootstrap grid system that I see most people misunderstanding is that you do not need all four classes - xs, sm, md, and lg. The browser will take the smallest one and apply that until it reaches a larger one.
So for instance, col-xs-4 would be applied at all screen sizes if no other sizes are ever applied. Adding col-sm|md|lg-4 to the same div is completely unnecessary.
As a side note, I also see col-xs-12 col-sm-4 a lot as well, which is also unnecessary. col-xs-12 is implied if you set a sm or larger class. Actually, 12 column is implied for any size smaller than the smallest declared.
So if you just put col-lg-4, then col-xs|sm|md-12 is implied. So if you want your layout to look exactly the same at all resolutions, just use xs. If you want it to look a certain way on tablets and up, but just be stacked on phones, then just use sm. If you want that div to be 3 on phones, 4 on tablets, and 6 on desktops and up, then you need col-xs-3 col-sm-4 col-md-6." (Posted by Sean Ryan at http://stackoverflow.com/questions/20319186/why-the-need-for-different-column-classes-in-twitter-bootstrap-3).