JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <!-- Logo -->
    <div id="logo">
      <div id="logo-name">
        <a class="navbar-brand" href="#/">Site Brand</a>
      </div>
      <div>
        <p>AAAA
          <br>BBBB
          <br>CCCC</p>
      </div>
    </div>

    <div id="nav-logo">
      <!-- Header Mobile -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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>

      <!-- Navbar Links -->
      <div class="collapse navbar-collapse" id="js-navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#/">ONE</a></li>
          <li><a ng-href="#/about">TWO</a></li>
          <li><a ng-href="#/">THREE</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>

CSS

#logo {
  display: block;
  float: left;
}

#nav-logo {
  display: block;
  float: right;
}

#logo-name {
  display: inline-block;
}

#logo-features {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  #logo {
    display: inline-block;
    float: none;
    width:100%;
    text-align:center;
  }
  #nav-logo {
    display: inline-block;
    float: none;
    width:100%;
    text-align:center;
  }
  .navbar-header button {
    float:none;
    margin:15px 0px;
  }
}