JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<nav class="navbar navbar-inverse 1navbar-fixed-top" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-bbb1" style="padding: 3px 15px;"> <b class="caret" style="border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff;"></b>

        </button>
        <div style="padding-top: 15px;"> <a href="" title="aaa" style="color:#ffffff;">Example.com</a>

        </div>
    </div>
    <div class="collapse navbar-collapse navbar-aaa1" id="id1">
        <ul class="nav navbar-nav pull-left">
            <li><a href="">Link left 1</a>
            </li>
            <li><a href="">Link left 2</a>
            </li>
            <li><a href="">Link left 3</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
    <div class="collapse navbar-collapse navbar-bbb1" id="id2">
        <ul class="nav navbar-nav pull-right">
            <li><a href="">Link right 1</a>
            </li>
            <li><a href="">Link right 2</a>
            </li>
            <li><a href="">Link right 3</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</nav>
<div class="hidden-xs" id="wsa">Please loook me in smaller then 768px.</div>
<span class="hidden-xs" id="wsp"></span>

CSS

.navbar-aaa1, .navbar-bbb1 {
    position: absolute;
    background-color: #222;
    border: 1px solid #080808;
}

.navbar-aaa1 {
    left: -1px;
}

.navbar-bbb1 {
    right: -1px;
}

@media (min-width: 768px) {
    .navbar-aaa1, .navbar-bbb1 {
        position: static;
        border: none;
    }
}

JavaScript

$("#wsp").html("current width: <strong>" + $(window).width() + "px</strong>");
$(window).resize(function () {
    $("#wsp").html("current width: <strong>" + $(window).width() + "px</strong>");
    if ($(window).width() < 768) {
        $("#wsa").hide();
        $("#wsp").hide();
    } else {
        $("#wsa").show();
        $("#wsp").show();
    }
});