Bootstrap 5 (update 2021)
Some of the classed have change for Bootstrap 5, but the concept is still the same. Here’s an updated Bootstrap 5 sidebar to navbar example
Bootstrap 4 (original answer)
It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.
Bootstrap 4 Sidebar switch to Top Navbar on mobile
<div class="container-fluid h-100">
<div class="row h-100">
<aside class="col-12 col-md-2 p-0 bg-dark">
<nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
<div class="collapse navbar-collapse">
<ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Link</a>
</li>
..
</ul>
</div>
</nav>
</aside>
<main class="col">
..
</main>
</div>
</div>
Alternate sidebar to top
Fixed sidebar to top
For the reverse (Top Navbar that becomes a Sidebar), can be done like this example