title: When screen size made smaller bootstrap tabs are overlapping
body: <p>When screen size made smaller bootstrap tabs are overlapping like image.
  <a href="https://i.stack.imgur.com/AGSsp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AGSsp.png" alt="enter image description here"></a></p>
  
  <p>I used <code>col-sm</code> and my angular HTML is like this (but any non-angular HTML solution is fine too):</p>
  
  <pre><code>&lt;div class="col-sm-6"&gt; &lt;tabset&gt; &lt;tab&gt;
      &lt;tab-heading active="true"&gt;
          Tab1
          &lt;toggle-switch &gt;&lt;/toggle-switch&gt;
      &lt;/tab-heading&gt;
  ...
  &lt;/tab&gt;
  &lt;tab&gt;
      &lt;tab-heading&gt;Tab2
          &lt;toggle-switch &gt;&lt;/toggle-switch&gt;&lt;/tab-heading&gt;
      ...
  &lt;/tab&gt;
  &lt;tab&gt;
      &lt;tab-heading&gt;Tab3
          &lt;toggle-switch &gt;&lt;/toggle-switch&gt;&lt;/tab-heading&gt;
      ...
  &lt;/tab&gt;&lt;/tabset&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I would like for the other tabs to stack in the background instead of the foreground.</p>
  
  <p><a href="https://i.stack.imgur.com/WOPUJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WOPUJ.png" alt="desired screenshot"></a></p>
  
  <p>Please forgive my terrible gimp skills, but the active tab should always be up front, so if tab 3 is selected, then the other row should shift to the back.</p>
  
  <p><a href="https://i.stack.imgur.com/XsnWV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XsnWV.png" alt="desired active"></a></p>
  
  <p>It doesn't have to be arranged specifically like this, but the point is that the active tab should not have anything in between it and its content pane, so something like this is also fine:</p>
  
  <p><a href="https://i.stack.imgur.com/vv6Bj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vv6Bj.png" alt="enter image description here"></a></p>