bootstrap css dosyasını incelerseniz çok güzel bir şekilde ve anlaşılır olarak yazılmıştır. size güzel kaynak olabilir.

http://maxcdn.bootstrapcdn.com/boots.../bootstrap.css

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

yukarıdaki örnekte col-md-* için değerleri görebilirsiniz.
ekran boyuturu 992px den büyük ise bu şekilde davranacaktır.
md (medium) olduğu için 992px in altındaki ekran boyutunda %100 olacaktır.
yukarıdaki örneğe göre istediğin ekran boyutları arasında istediğin div in alabileceği değerleri belirtebilirsin.

Örnek birkaç @media özelliği

Maximum 767px ekran boyutuna kadar nasıl görüneceği

@media (max-width: 767px) {
...
..
}

992px ile 1199px arasında nasıl görüneceği

@media (min-width: 992px) and (max-width: 1199px) {
....
..
}

Minimum 1200px de nasıl görüneceği

@media (min-width: 1200px) {
....
..
}