javascript - 在 Bootstrap 导航中切换位置

Question

正如您在此 JSFiddle 中看到的那样我使用 Bootstrap 创建了一个响应式导航菜单。但是，我想知道如何让社交图标出现在小型设备的右侧，导航按钮出现在左侧。很抱歉，我是新手，我用谷歌搜索但找不到解决方案。

你可以看到我正在努力实现的一个例子here (顶部黑色导航菜单。)

这是 HTML 代码:-

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-youtube-play" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-tumblr" aria-hidden="true"></i>
        <i class="fa fa-soundcloud" aria-hidden="true"></i>
        <i class="fa fa-vimeo-square" aria-hidden="true"></i>
        <i class="fa fa-linkedin" aria-hidden="true"></i>
        <i class="fa fa-rss" aria-hidden="true"></i>
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <form>
                <input type="text" name="search" placeholder="Search Text Here...">
                <button><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>
        </ul>
    </div>
</div>

Answer 1

您可以为此使用 css 媒体查询。 像这样，

@media (min-width: 500px) {
   .cls1 {
     float: left;
   }
}

@media (min-width: 501px) {
   .cls2 {
      float: right;
   }
}

我已经更新了你的 fiddle .