Temporarily change bootstrap 3 navbar collapse breakpoint using css

Question

Have successfully implemented the stackoverflow post, found below, on how to change the breakpoint of bootstrap navbars:

Bootstrap 3 Navbar Collapse

However...I am trying to figure out how to change the collapsing behavior of one specific navbar on a page that also has several "standard" navbars. And would like to do this with CSS only, not using LESS or SASS.

I have tried copying/renaming some of the navbar classes as custom CSS, but so far no useful results. Nevertheless, my hunch is this approach should work. Was hoping for either some pointers in which are the essential classes, or perhaps another approach...

A similar question was asked before by someone else, but not answered:

Bootstrap 3 Navbar Collapse - change breakpoint for a specific navbar

---

After posting the question above, I may have stumbled on something. It seems to work, but surely needs further investigation:

Not sure of all the mechanical details, but not looking a gift horse in the mouth.

From the first link above, I modified the following classes and media query, leaving the other classes in that post untouched (but still using them):

    @media (max-width: 1000px) {
      .navbar-header2 {
          float: none;
      }
      .navbar-toggle2 {
          display: block;
      }
      .navbar-left2,.navbar-right2 {
          float: none !important;
      }
      .navbar-collapse2 {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-collapse2.collapse {
          display: none!important;
      }
      .navbar-nav2 {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav2>li {
          float: none;
      }
      .navbar-nav2>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
    }

One of my original mistakes was putting that style code in the wrong place, so buyer beware.

Then:

<div class="navbar-header navbar-header2">
    <button type="button" class="navbar-toggle navbar-toggle2" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Products</a>
</div>
<div class="collapse navbar-collapse collapse2 navbar-collapse2" id="myNavbar">
    <ul class="nav nav-pills nav-stacked">
        <li>stuff goes here</li>
        <li>stuff goes here</li>
    </ul>
</div>

Will post additional notes as determined by future circumstances. One curious note, the three ".navbar-nav2" classes in the style code above seem to be required. Leaving them all as ".navbar-nav" blew-up at least one of my "standard" navbars.

Any thoughts, comments and corrections appreciated. I am well aware it undoubtedly needs more work. Some of the changes I made might be wholly unnecessary, or worse. But for now, its progress! (I think. Maybe.)