Html 如何使div响应并折叠到小屏幕上的选项卡

我有三个并排的div，以及如何让它们在小屏幕上折叠成标签

基本上，三个div在大屏幕上都可见，但转换为三个选项卡，对应于三个选项卡，只有活动的一个以小屏幕大小显示。

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>

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

---

你听说过“手机优先”吗？让移动设备正确显示，然后修复代码以支持更大的设备。此外，您认为为什么使用引导？为了回答这个问题，我们需要查看您的代码，请与我们分享，以便我们能够提供实际帮助，而不是盲目猜测，这些猜测可能完全无效，也可能完全无效。