bootstrap: динамическая разметка сайта

Question

Я только начал изучать начальную загрузку 4.

Расскажите, как вы можете реализовать внешний вид и поведение моих трех блоков, из которых состоит страница.

<div>
    <div>Menu block</div>
    <div>Tools block</div>
    <div>Content block</div>
</div>

В этом случае к DIV предъявляются следующие требования:

1. При большом экране блоки имеют фиксированные размеры и положение (как показано на рисунке 1)

меню фиксируется в верхней части страницы, панель инструментов занимает фиксированную ширину (ну или 2 из 12 столбцов) и имеет собственную прокрутку, если контент не умещается на экране, панель контента отображается похож на панель инструментов только шире (8 из 12)

2. при уменьшении размера (скажем, по телефону) все 3 блока становятся один под другим, меню превращается в раскрывающийся список, панель инструментов при щелчке расширяется, а панель содержимого сворачивается (как показано на рисунке 2). )

3. когда вы нажимаете кнопку на панели инструментов, панель инструментов минимизируется, а панель контента увеличивается (теоретически, я обрабатываю кнопку, и, вероятно, достаточно просто изменить класс панелей)

Подскажите, как это можно сделать с помощью bootstrap 4 . Здесь главное начать, и дальше будет легко:)

P.S.

С меню у меня все по порядку - делаю так

        <nav className = "navbar navbar-expand-sm navbar-light bg-light">
            <div className = "navbar-brand"></div>

            <button className = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbar" aria-controls = "navbar" aria-expanded = "false" aria-label = "Toggle navigation">
                <span className = "navbar-toggler-icon"></span>
            </button>

            <div className = "collapse navbar-collapse" id = "navbar">
                <ul className = "navbar-nav mr-auto">
                    {this.state.m_menuComponents}
                </ul>
            </div>
        </nav>

но у меня проблемы с другими DIV