I have a 3-col-layout like
<div class="container">
<div class="row">
<div class="col-md-2" id="block1">#block1 .col-md-2</div>
<div class="col-md-2" id="block2">#block2 .col-md-2</div>
<div class="col-md-8" id="block3">#block3 .col-md-8</div>
</div>
</div>
----------------------------------------------------------------
| | | |
| | | |
| | | |
| | | |
| #block1 | #block2 | #block3 |
| .col-2 | .col-2 | .col-8 |
| | | |
| | | |
| | | |
| | | |
----------------------------------------------------------------
On small screens the columns slide one below the other:
-------------------------
| |
| |
| |
| |
| #block1 |
| .col-12 |
| |
| |
| |
| |
-------------------------
-------------------------
| |
| |
| |
| |
| #block2 |
| .col-12 |
| |
| |
| |
| |
-------------------------
-------------------------
| |
| |
| |
| |
| #block3 |
| .col-12 |
| |
| |
| |
| |
-------------------------
Now I want the first two columns to collapse like the typical Bootstrap navigation:
-------------------------
| #block1 .col-12 ≡ |
-------------------------
-------------------------
| #block2 .col-12 ≡ |
-------------------------
-------------------------
| |
| |
| |
| |
| |
| #block3 .col-12 |
| |
| |
| |
| |
-------------------------
I tried to "clone" it from the Bootstrap starter template, but could not found out, what exactly manages this behavior.
How to get DIVs collapsing automatically on small screens and provide a toggle button? Is it possible to do this by using only Bootstrap classes (without additional JS)?