如何在bootstrap 3中做2个导航栏的单页响应

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <!-- 第一个导航栏内容 -->
</nav>

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <!-- 第二个导航栏内容 -->
</nav>

@media (max-width: 767px) {
  .navbar-bottom {
    display: none;
  }
}

@media (min-width: 768px) {
  .navbar-top {
    display: none;
  }
}

$(document).ready(function() {
  $('.navbar-toggle').click(function() {
    $('.navbar-bottom').toggle();
    $('.navbar-top').toggle();
  });
});