Bootstrap 4 - 可折叠垂直面板

Question

我见过很多处理横向导航栏的Q＆amp; A - 但找不到这个用例的解决方案。

1. 我有固定 Left Panel，流畅 Center panel和已修复右侧面板。
2. 左侧面板和右侧面板应具有最大宽度和最小宽度。为了这个例子，让我们说： minimum-width=200 and maximum-width = 300。
3. 中心面板应具有最小宽度。让我们说： minimum-width=500像素。
4. 屏幕宽度尺寸为left-minimum-width + right-minimum-width + center-minimum-width时，应显示所有三个面板。在这个例子中，那是200 + 200 + 500 = 900。我们称之为“full-width”。
5. 左侧和右侧面板应可折叠成一个细长的列，其宽度为简单图标。 （图标宽度）。我们来说icon-width=32。
6. 在right-minimum-width + center-minimum-width + icon-width（732）和full-width之间，左侧面板应折叠成一个带有图标的细竖条。 点击后，面板应展开“中心容器”。
7. 在center-minimum-width + 2 x icon-width（564）之间，左右两个面板都应该折叠。 点击后，相关面板应展开“中心容器”。
8. 低于此尺寸，所有三个面板应垂直堆叠。作为一个超级酷的奖励，左右面板，现在将是可折叠/可扩展的水平条。

这是基本布局：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100" id="root">
	<div class="row h-100">
		<div class="col-md-3 fixed pl-0 py-3">Page Panel Left</div>
		<div class="col fluid bg-faded   py-3">Page Panel Main Stage</div>
		<div class="col-md-3 fixed  py-3">Page Panel Right
			<div>
              <br><p>Nullam congue, dui luctus aliquam maximus, erat magna posuere purus, posuere elementum urna nisi vitae dolor. Integer tristique non velit ut suscipit. Vestibulum quam eros, blandit dapibus iaculis nec, volutpat vel purus. Quisque commodo euismod ipsum, quis pulvinar augue. Cras non fermentum velit. Proin tincidunt lectus diam, at ornare augue interdum eget. Vivamus porttitor iaculis urna in porttitor. Maecenas auctor ac augue convallis eleifend. Praesent lacus odio, placerat sed felis ac, vulputate auctor quam. Cras in nulla eu libero cursus cursus ut a enim. Praesent varius viverra maximus. Morbi accumsan, orci quis semper tempus, leo ipsum efficitur ipsum, eu fermentum ipsum est ac nibh. Ut ut venenatis eros. Duis neque nulla, malesuada non ultrices non, laoreet nec enim. Mauris congue, ipsum non ultrices congue, leo eros tristique urna, bibendum accumsan ligula sem in justo.</p>
          	</div>	
      	</div>
	</div>
</div>

我已经倾倒了bootstrap 4 collapse和navbar docs，觉得上面的大部分内容都可以在没有繁重的javascript的情况下完成，但是无法弄明白。显然，使用库存Bootstrap 4和补充css而不是JScript / JQuery可以做得越多越好。

本文还有一些线索：Bootstrap 4 Vertical Menu。

最后，这是一个非常丑陋的模拟我想要实现的东西，也显示了一个可折叠的底部面板：