title: Creating stable, responsive layouts in Twitter Bootstrap
body: <p>I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.</p>
  
  <p>In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.</p>
  
  <p>Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by <a href="http://tylergaw.com/articles/reacting-to-media-queries-in-javascript" rel="nofollow">registering for media query events</a>.</p>
  
  <p>Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?</p>
  
  <p>I am looking for general advice, but I can post code and screenshots if that will help.</p>
  
  <p><strong>Update</strong>: Looks like media query events are <a href="https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia" rel="nofollow">not well supported</a>.</p>