title: Bootstrap apply nav-stacked if small screen
body: <p>Let's say we have a simple navigation bar like this:<br>
  <a href="http://getbootstrap.com/components/#nav-pills" rel="nofollow">http://getbootstrap.com/components/#nav-pills</a></p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
    &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I add the class "nav-stacked" to it when the window or parent element is smaller than say 940px. Or even better: as soon as the navigation bar can't fit all elements in the same line anymore.</p>
  
  <p>This would be pretty straight forward in javascript, but I'd like to see a pure css/html solution, but without adding @media queries to the bootstrap source code.</p>