У меня есть такая bootstrap сетка:
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12" style="border: 1px solid black">A1</div>
<div class="col-12" style="border: 1px solid black">A2</div>
<div class="col-12" style="border: 1px solid black">A3</div>
<div class="col-12" style="border: 1px solid black">A4</div>
<div class="col-12" style="border: 1px solid black">A5</div>
</div>
</div>
<div class="col-4">
<div class="row" style="height: 100%">
<div class="col-12" style="border: 1px solid black; height: 100%">B</div>
</div>
</div>
</div>
</div>
https://codepen.io/slava4ka/pen/QWWwOax
Вопрос такой: как можно сделать так, чтоб при уменьшении размера зоны видимости
до .col-sm- сетка выглядела так: