Bootstrap responsive layout in mobile convert to tabs

Question

So as the title suggests, I am currently using Bootstrap. I am working on a responsive layout that in desktop size, is just a normal columned floated layout. Then in mobile device or tablet size, it adds bootstrap tabs. I am not sure quite how to solve this as the bootstrap 3 col-xs floats don't seem to be playing nice with the tabs plugin. I have made a diagram to help explain.

Fiddle I've been working with jsfiddle

<div class="container">   
<div class="content">
    <ul class="nav nav-tabs visible-phone">
        <li class="active"><a href="#t1" data-toggle="tab">T1</a></li>
        <li><a href="#t2" data-toggle="tab">T2</a></li>
        <li><a href="#t3" data-toggle="tab">T3</a></li>
    </ul>

    <div class="row tab-content">
        <div class="col-sm-4 tab-pane active" id="enter">
            <div class="inner-right-border">
                <h2>T1 CONTENT</h2>
                <hr />
            </div>
        </div>
        <div class="col-sm-8">
            <div class="tab-pane" id="t2">
                <h2>T2 CONTENT</h2><hr />
            </div>
            <div class="tab-pane" id="t3">
                <h2>T3 CONTENT</h2><hr />
            </div>
        </div>
    </div>
</div>                

Thanks in advance for any help!

Answer 1

Needed something similar

HTML:

<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs device-small" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active col col-xs-12 col-sm-4" id="home">...home...</div>
        <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="profile">...profile...</div>
        <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="messages">...messages...</div>
    </div>

</div>

CSS:

/* small device */
@media (max-width: 767px) {
    .device-big {
        display: none;
    }
    .device-small {
        display: block;
    }
}
/* big device */
@media only screen and (min-width : 768px) {
    .device-big, .tab-content > .tab-pane {
        display: block;
    }
    .device-small {
        display: none;
    }
    .tab-content > .tab-pane {
        display: block;
    }
}

Here is working example: http://jsfiddle.net/bomff3g6/

Answer 2

The CSS code above works, but has an issue with nested tabs. e.g from the initial - future tab one then contains 2 tabs.

I wanted to post this as a comment to the Atul's response, but don't have enough "reputation" points.

This is a slight tweak to allow nested tabs.

@media (max-width: 767px) {
  .device-big {
    display: none;
  }
  .device-small {
    display: block;
  }
}
/* big device */
@media only screen and (min-width : 768px) {
  .tab-content > .tab-pane.device-big {
    display: block;
  }
  .device-small {
    display: none;
  }
}

Answer 3

Working jsfiddle: https://jsfiddle.net/41s795qn/

A updated bootstrap v4 version from Atul Yadav's answer:

<div class="container-fluid">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs hidden-md-up" role="tablist">
        <li class="nav-item"><a class="nav-link active" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
        <li class="nav-item"><a class="nav-link" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content row">
        <div role="tabpanel" class="tab-pane active col col-12 col-md-4" id="home">...home...</div>
        <div role="tabpanel" class="tab-pane col-12 col-md-4" id="profile">...profile...</div>
        <div role="tabpanel" class="tab-pane col-12 col-md-4" id="messages">...messages...</div>
    </div>
</div>

CSS:

/* big device */
@media(min-width : 768px) {
    .tab-content > .tab-pane {
        display: block;
    }
}