Bootstrap pills - show pills if mobile device else show all content (responsive)

Question

I've been trying to figure out how to show pills if the screen is xs layout (bootstrap). I want to show all the content if it's a bigger device. Is there a way of removing the "tab-content" class on the div including the content if the device is bigger then phone-screen/bootstrap xs?

Right now it will only show the active tab-pane if I'm on a bigger device. Pills work if i use a phone size.

The question is how to show all content if I'm on a bigger device and pills if I'm on a small device?

<div id="content">
    <h1>TEST PILLS</h1>
    <ul id="pills" class="navbar-toggle nav nav-pills" data-tabs="pills">
        <li class="active"><a href="#red" data-toggle="tab">RED</a></li>
        <li><a href="#orange" data-toggle="tab">ORGANGE</a></li>
    </ul>
    <div id="my-pills" class="tab-content ">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
    </div>
</div>

Answer 1

Ok one solution (if you use knockout) is to use the template binding (if you dont want to clutter your markup to much).

<div id="content">
    <h1>Test</h1>
    <div class="visible-xs">
        <ul id="pills" class="navbar-toggle nav nav-pills nav-justified pull-left" data-tabs="pills">
            <li class="active"><a href="#person" data-toggle="tab">Person</a></li>
            <li><a href="#course" data-toggle="tab">Course</a></li>
        </ul>
        <div id="my-pills" class="tab-content" style="clear: both">
            <div id="person" class="tab-pane active" data-bind="template: {name: 'person-temp', foreach: listOfPersons}"></div>
            <div id="course" class="tab-pane" data-bind="template: {name: 'course-temp', foreach: listOfCourses}"></div>
        </div>
    </div>
    <div class="visible-sm visible-md visible-lg">
        <div id="person" class="tab-pane active" data-bind="template: {name: 'person-temp', foreach: listOfPersons}"></div>
        <div id="course" class="tab-pane" data-bind="template: {name: 'course-temp', foreach: listOfCourses}"></div>
    </div>
</div>

<script type="text/html" id="person-temp">
    <div>
        <h1 data-bind="text: name"></h1>
        <p>hej Person(s)</p>
    </div>
</script>
<script type="text/html" id="course-temp">
    <div>
        <h1 data-bind="text: name"></h1>
        <p>hej hej</p>
    </div>
</script>

Hope it helps someone ;)

/J