When screen size made smaller bootstrap tabs are overlapping like image.
[![enter image description here](https://i.stack.imgur.com/AGSsp.png)](https://i.stack.imgur.com/AGSsp.png)

I used `col-sm` and my angular HTML is like this (but any non-angular HTML solution is fine too):

```
<div class="col-sm-6"> <tabset> <tab>
    <tab-heading active="true">
        Tab1
        <toggle-switch ></toggle-switch>
    </tab-heading>
...
</tab>
<tab>
    <tab-heading>Tab2
        <toggle-switch ></toggle-switch></tab-heading>
    ...
</tab>
<tab>
    <tab-heading>Tab3
        <toggle-switch ></toggle-switch></tab-heading>
    ...
</tab></tabset></div>

```

I would like for the other tabs to stack in the background instead of the foreground.

[![desired screenshot](https://i.stack.imgur.com/WOPUJ.png)](https://i.stack.imgur.com/WOPUJ.png)

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.

[![desired active](https://i.stack.imgur.com/XsnWV.png)](https://i.stack.imgur.com/XsnWV.png)

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:

[![enter image description here](https://i.stack.imgur.com/vv6Bj.png)](https://i.stack.imgur.com/vv6Bj.png)