Boot layout in mobile bookmark conversion

Question

So, as the name implies, I'm currently using Bootstrap. I am working on a flexible layout that on the desktop is a regular floating-point plugin. Then he adds the boot tabs to the size of the mobile device or tablet. I'm not quite sure how to solve this, since the bootstrap 3 col-xs float doesn't seem to play well with tab plugins. I made a chart to help explain.

Fiddle I worked 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 your help!

Answer 1

Need something like that

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;
    }
}

: http://jsfiddle.net/bomff3g6/

Answer 2

CSS , . , "-", 2 .

Atul, .

.

@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;
  }
}

Hide result

Answer 3

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

bootstrap v4 Atul Yadav :

<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;
    }
}

Answer 4

. , , - . .