title: Make Bootstrap 3 Tabs Responsive
body: <p>Currently, when you set up tabs in Bootstrap 3, the tabs are not responsive.</p>
  
  <p>This:</p>
  
  <p><img src="https://i.stack.imgur.com/O1F8M.png" alt="enter image description here"></p>
  
  <p>Turns into this:</p>
  
  <p><img src="https://i.stack.imgur.com/Wq0jO.png" alt="enter image description here"></p>
  
  <p><strong>CSS. Fixing how it looks is easy, just  removing the float, etc. at the max-width. However, the content is disjointed from the tab, so a stack of tabs will work like tabs but on smaller viewports you may or may not see the change in content.</strong></p>
  
  <hr>
  
  <p>This is the basic html for making a tabbed navigation:</p>
  
  <pre><code>      &lt;!--begin tabs going in wide content --&gt;
         &lt;ul class="nav nav-tabs" id="maincontent" role="tablist"&gt;
            &lt;li class="active"&gt;&lt;a href="#home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#profile" role="tab" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
               &lt;a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
               &lt;ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"&gt;
                  &lt;li&gt;&lt;a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab"&gt;@fat&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab"&gt;@mdo&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
            &lt;/li&gt;
         &lt;/ul&gt;&lt;!--/.nav-tabs.content-tabs --&gt;
  
  
         &lt;div class="tab-content"&gt;
  
            &lt;div class="tab-pane fade in active" id="home"&gt;
               &lt;p&gt;Home Content : ...&lt;/p&gt;
            &lt;/div&gt;&lt;!--/.tab-pane --&gt;
  
            &lt;div class="tab-pane fade" id="profile"&gt;
               &lt;p&gt;Profile Content : ...&lt;/p&gt;
            &lt;/div&gt;&lt;!--/.tab-pane --&gt;
  
            &lt;div class="tab-pane fade" id="dropdown1"&gt;
               &lt;p&gt;Dropdown1 - ...&lt;/p&gt;
            &lt;/div&gt;&lt;!--/.tab-pane --&gt;
  
            &lt;div class="tab-pane fade" id="dropdown2"&gt;
               &lt;p&gt;Dropdown 2 - ...&lt;/p&gt;
            &lt;/div&gt;&lt;!--/.tab-pane --&gt;
  
         &lt;/div&gt;&lt;!--/.tab-content --&gt;
  </code></pre>
  
  <p><em>How do you turn the Tabs into the Accordion or Collapse so that it's small viewport friendly?</em></p>