JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <div class="navbar-header"> <a class="navbar-brand" href='#'>Brand</a>

        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href='#'>Shopping Cart</a>

            </li>
        </ul>
        <div class="navbar-collapse collapse navbar-left">
            <ul class="nav navbar-nav">
                <li><a href='#'>Home</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.navbar-right {
    float: right;
}
.nav.navbar-nav.navbar-right ul {
    float: right;
}
.nav.navbar-nav.navbar-right li {
    float: left;
}
.navbar-toggle {
    float: left;
}
@media all and (max-width:767px) {
    .navbar-header {
        float: left;
    }
    
    .navbar-collapse {
        clear: both;
        float: none;
    }
}