Как переопределить бутерброд-меню в bootstrap под другое разрешение?

.navbar-brand { 
  height: auto; 
  margin-left: 0 !important; 
} 
@media screen and (min-width: 768px) { 
  .navbar > .container > * { 
    display: table-cell !important; 
    float: none; 
    vertical-align: middle; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" /> 
<div class="navbar navbar-inverse"> 
  <div class="container"> 
    <!-- Header --> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
        <img src="http://placehold.it/66x61">Bootstrap 3 Skeleton 
      </a> 
    </div> 
    <!-- Navbar Links --> 
    <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a> 
        </li> 
        <li><a href="#about">About</a> 
        </li> 
        <li><a href="#about">First</a> 
        </li> 
        <li><a href="#about">Second</a> 
        </li> 
        <li><a href="#about">Third</a> 
        </li> 
        <li><a href="#about">Forth</a> 
        </li> 
        <li><a href="#contact">Contact</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div>