Q:

Why bootstrap css (3.2) can work on mobile and desktop

Forgive me I am a newbie for the BootStrap. I was reading the tutorial Bootstrap Css Getting Start. and there is a sample in the tutorial. 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div> 

the tutorial says in this ways this sample will support mobile ,tablet and desktops.
I was confused with this. How bootstrap css works in the sample?
I look the css code and found 
.col-xs-12 {
  width: 100%;
}

.col-sm-6 {
  width: 50%;
}

.col-md-8 {
  width: 66.66666667%;
}

for the <div class="col-xs-12 col-sm-6 col-md-8"> the only worked css will be the .col-md-8. So my questions are 
1.Is there any special meaning for doing so (I mean apply col-xs-12 col-sm-6 col-md-8 to div )? Actually the only working css class is col-md-8.
2.If I want to design a site which can be looked nice in mobile and desktop. How can I implement it with BootStrap css? Please give me some suggestions. thanks.

A:

Bootstrap uses CSS Media Queries to target specific resolutions.
If you go further down Bootstrap's CSS file you'll find things like this:
@media (min-width: 768px) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
   .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  ...
}

This specific media query targets browsers with a minimum width of 768px, for instance.

