¿La pregunta principal es cómo personalizar bootstrap responsive css? Mi código funciona parcialmente pero no puedo arreglar estos casos. Es difícil de explicar, así que para una mejor comprensión, hice la visualización presentada en capturas de pantalla.

Publiqué el código de la plantilla limpiaJSFIDDLE.

Ahora, cuando el ancho es mayor que 1200px, las columnas están bien, eso significa que son dos span6 de lado a lado: Entre 1200px y 980px, la visualización debería ser como: Menos de 979px y más de 768px en el primer colapso de la barra de navegación. Me gustaría tener algo así en el centro de contenedores: Hasta la próxima contracción debajo de 768px, la columna derecha ha saltado a una nueva línea y permanece allí cuando se reduce a 480px y menos. Creo que la vista que se presenta a continuación está bien para dispositivos móviles y se ve mejor en navegadores de escritorio estrechos, con la excepción de que cuando la escala de ambas columnas no está en el centro:

El ancho más pequeño corresponde a mis expectativas.