A questão principal é como personalizar o CSS de bootstrap responsivo? Meu código funciona parcialmente, mas não posso consertar esses casos. É difícil explicar, então, para entender melhor, fiz a visualização apresentada em capturas de tela.

Eu postei o código do template limpoJSFIDDLE.

Agora, quando a largura é maior que 1200px, as colunas estão ok, o que significa que elas são duas span6 lado a lado: Entre 1200px e 980px, a tela deve se parecer com: Menos de 979px e mais de 768px no primeiro colapso da navbar Eu gostaria de ter algo parecido no centro do container: Até o próximo encolhimento abaixo da coluna direita de 768px pular para a nova linha e ficar lá quando reduzir ainda mais para 480px e abaixo. Eu acho que a visão apresentada abaixo está ok para dispositivos móveis e melhor aparência em navegadores de desktops estreitos, com a exceção de que, quando escalar ambas as colunas, não estão no centro:

A menor largura corresponde às minhas expectativas.