Jak dostosować responsywne kolumny i pola wejściowe w bootstrapie twitter?

Główne pytanie brzmi: jak dostosować css reagujący na bootstrap? Mój kod częściowo działa, ale nie mogę naprawić tych przypadków. Trudno to wyjaśnić, dla lepszego zrozumienia zrobiłem wizualizację prezentowaną na zrzutach ekranu.

Wysłałem rzeczywisty oczyszczony kod szablonuJSFIDDLE.

Teraz, gdy szerokość jest większa niż 1200px, kolumny są w porządku, co oznacza, że ​​są dwa span6 obok siebie: Między 1200 a 980 pikseli wyświetlacz powinien wyglądać tak: Mniej niż 979px i więcej niż 768px na pierwszej kolapie navbar Chciałbym mieć coś takiego w centrum kontenerów: Do następnego skurczenia poniżej 768px prawa kolumna przeskakuje do nowej linii i pozostaje tam, gdy zmniejsza się dalej do 480px i poniżej. Myślę, że przedstawiony poniżej widok jest odpowiedni dla urządzeń mobilnych i lepiej wygląda w wąskich przeglądarkach komputerów stacjonarnych, z wyjątkiem tego, że gdy skala nie ma obu kolumn na środku:

Najmniejsza szerokość odpowiada moim oczekiwaniom.

questionAnswers(1)

yourAnswerToTheQuestion