title: Collapse navbar sooner then 576px
body: <p>I use the navbar below, and I want it to collapse at 768px. I tried using css, however I break the module if I force any display property onto <code>&lt;Collapse /&gt;</code>.</p>
  
  <pre><code>&lt;Navbar fixed={`top`} inverse toggleable className={"navfix bg-brown"} &gt;
        &lt;NavbarToggler right onClick={this.toggle} className=""/&gt;
        &lt;NavbarBrand href="/" className={'mx-auto'}&gt;&lt;br /&gt;&lt;div className="text-center logo"&gt;
          &lt;img className="logoImg" src={"../pictures/brand/brand.png"} alt="B54 Cafe, Bistro &amp; Bakery"/&gt;
        &lt;/div&gt;&lt;/NavbarBrand&gt;
      &lt;Collapse isOpen={this.state.isOpen} navbar className={"toggler "}&gt;
          &lt;Nav className="ml-auto" navbar&gt;
            &lt;div className="static"&gt;
              &lt;NavItem&gt;
                &lt;NavLink to={'/'} exact activeClassName="active" tag={RRNavLink}&gt;Homepage&lt;/NavLink&gt;
              &lt;/NavItem&gt;
              &lt;NavItem&gt;
                &lt;NavLink to={'/about'} activeClassName="active" tag={RRNavLink}&gt;About&lt;/NavLink&gt;
              &lt;/NavItem&gt;
            &lt;/div&gt;
            {Object.keys(this.props.meals).map((types, index) =&gt;
              &lt;NavItem key={types+index}&gt;
                &lt;NavLink
                  to={'/'+types.normalize('NFD').replace(/[\u0300-\u036f]/g, "")} activeClassName="active" tag={RRNavLink}&gt;
                  {types}
                &lt;/NavLink&gt;
              &lt;/NavItem&gt;
              )
            }
          &lt;/Nav&gt;
        &lt;/Collapse&gt;
      &lt;/Navbar&gt;
  </code></pre>
  
  <p>How do you solve this problem in reactstrap? If you think I should consider other aproaches, I am all ears.
  Here is a github page about the project, you can see how the navbar collapses and how reactstrap applies css onto <code>"navbar-collapse"</code> before 576px, and how the <code>display: flex!important;</code> is applied by bootstrap after 576px. If I force a display property onto <code>"collapse"</code> or <code>"navbar-collapse"</code>. I ovverride the css reactsrap applies so I break the module. I don`t want to rewrite bootstrap.min.css and I am looking for alternatives.
  <a href="https://nemethnorbert.github.io/restaurant-website/" rel="nofollow noreferrer">githubPage from the website</a></p>
  
  <p>Thank you!</p>