What's the difference between col-md-x, col-xs-x, col-sm-x, col-lg-x?

Getting your head around the grid structure for Bootstrap can be challenging at times. But not to worry! We shall prevail!

The grid in Bootstrap is divided into 12 chunks. In short, I'd like to think about this as a how big the column is depending on the screen size:

1. col-xs-x - phone
2. col-sm-x - tablets
3. col-md-x - laptops
4. col-lg-x - screns

This way you can define how many columns you may want to have for each screen size. If we want to two columns independently of the screen size we would want to col-xs-6 (12 gird / 6 width column = 2 columns) :

But if we want the thing to break (to make responsive design) we would use e.g.

(The demo isn't going to work if you are reading it on a tablet.)

This way if you make the window smaller, you will get two long rows as oppose to two columns.