Как лучше сделать резиновую верстку 960-1200px?
По большому счёту адаптивная вёрстка это несколько версий CSS в одном файле под каждое нужное разрешение экрана. Только за место дублировать один и тот же код по нескольку раз, мы пишем какой-то основной код (к примеру под FullHD разрешения), а уже в таких конструкциях@media only screen and (max-width: 480px) {
}
указываем только то, что нам нужно на каком-то разрешении поменять.
Пример:body {
    background: red;
}

.responsive-bloks {
    width: 33.33%;
    min-height: 1px;
    float: left;
}

@media only screen and (max-width: 480px) {
    body {
        background: blue;
        color: green; /* Обратите внимание что я не переписываю для другого разрешения все стили, а только меняю или добавляю то, что мне нужно что бы изменялось.  */
    }

    .responsive-bloks {
        width: 50%; /* Обратите внимание что я не переписываю для другого разрешения все стили, а только меняю или добавляю то, что мне нужно что бы изменялось.  */
    }
}
пишишьbody {
  min-width: 960px;
  max-width: 1200px;
   margin: 0 auto;
}
header {
  width: 100%;
}
.logo {
 margin: 0 auto;
 width: 80%;
}
.mainMenu {
 width: 60%; 
}
То бишь, указываешь ширину блоков и элементов в %, и при необходимости, ограничиваешь максимальную, и минимальную ширину. Если использовать бутстрап, то в настраеваешь его под данные размеры. Но я бы не стал использовать сетку бутсраповскую, если адаптивность не так важна.