Media Query BOOTSTRAP grid(сетка) v3.3.7

media.css

/*При создании адаптивной разметки необходимо определиться 
с основными контрольными точками. 
Например, 576px, 768px, 992px и 1200px. 
Эти точек может быть больше или меньше в зависимости от 
реализуемого макета. Эти точки должны определять изменения 
в верстке. Т.е. до 576px должна быть одна разметка, 
при 576px и выше другая, при 768px и больше тоже другая
и т.д.*/
/*
Использовать в этом файле можно только один из вариантов.
Причем последовательность блоков !!!ВАЖНА 
*/
/* или 1 ВАРИАНТ*/
/* xs */
@media (max-width: 480px) {

}

/* sm */
@media (min-width: 640px) and (max-width: 767px) {

}

/* md */
@media (min-width: 768px) and (max-width: 1199px) {

}

/* lg */
@media (min-width: 1200px) {

}

/* или 2 ВАРИАНТ*/
/* Extra small devices (phones, less than 768px) No media 
query since this is the default in Bootstrap */

/* sm (768px and up) */
@media (min-width: 768) { /* col-sm-* */

}

/* md (992px and up) */
@media (min-width: 992) {

}

/* lg (1200px and up) */
@media (min-width: 1200) { 

}