title: How do I switch between nav-pills and nav-stacked for different screen sizes?
body: <p>I am trying to figure out how to switch between <code>nav-stacked nav-pills</code> for mobile and <code>non-nav-stacked nav-pills</code> for everything else using Bootstrap. 
  For example, for desktop:</p>
  
  <pre><code> &lt;nav&gt;
    &lt;ul class="nav nav-pills"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href="index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And for mobile:</p>
  
  <pre><code> &lt;nav&gt;
    &lt;ul class="nav nav-pills nav-stacked"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href="index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt; 
  </code></pre>