How to rewrite media query from Bootstrap?

Question

Bootstrap

How do I rewrite the given navigation to be 666px wide.
When this width is reached, the navbar-header should appear and id="myNavbar" should disappear. Unable to rewrite media query given by bootstrap.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar color"></span>
        <span class="icon-bar color"></span>
        <span class="icon-bar color"></span>
      </button>
      <a class="navbar-brand" href="../html/index.html" id="logo">C ONLINE LTD</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="../html/index.html">Home</a></li>
        <li><a href="../html/about.html">About Us</a></li>
        <li><a href="../html/contact.html">Contact Us</a></li>
        <li><a href="../html/news.html">News</a></li>
        <li><a href="../html/location.html">Our Location</a></li>
        <li><a href="../html/clients.html">Our Clients</a></li>
        <li><a href="../html/login.html">Login</a></li>
        <li><a href="../html/register.html">Register</a></li>
      </ul>
    </div>
  </div>
</nav>

@media (max-width: 666px) {
   .navbar-header {
        display: block!important;
   }
    .collapse {
        display: none!important;
    }
}

Answer 1

You go here getbootstrap.com/customize/#grid-system
And in @grid-float-breakpoint you change the value to 666