title: How to customize responsive columns and inputs fields in twitter bootstrap?
body: <p>Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots. </p>
  
  <p>I posted actual cleaned template code on <a href="http://jsfiddle.net/PyVc7/1/" rel="nofollow noreferrer">JSFIDDLE</a>.</p>
  
  <p>Now when width is more then 1200px columns are ok that mean they are two span6 side by side:
  <img src="https://i.stack.imgur.com/YCrtB.png" alt="enter image description here">
  Between 1200px and 980px display should looks like:
  <img src="https://i.stack.imgur.com/HnkEW.jpg" alt="enter image description here">
  Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center:
  <img src="https://i.stack.imgur.com/dZ6ik.png" alt="enter image description here">
  Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center: 
  <img src="https://i.stack.imgur.com/Sq2zi.png" alt="enter image description here"></p>
  
  <p>The smallest width corresponds to my expectations.</p>