Сортировать порядок вложенных столбцов при сужении

Question

У меня есть три вложенных раздела, как показано ниже.

<div class="row">
    <div class="col-md-2">
    A
    </div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-6 col-sm-12">
            B
            </div>
            <div class="col-md-6 col-sm-12">
            C
            </div>
        </div>
    </div>
<div>

в обычной ситуации показывает

| A | B | C |

, это хорошо.

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

Я хочу показать вот так

|   |  B |
| A |----| 
|   |  C |

Поэтому я использую это.

<div class="col-md-6 col-sm-12">

BC сложено вертикально, как и предполагалось, однако Aобласть занята B & C.

||B|
|| | <-- A is under B&C
||C|

Есть ли способ решить ??

Answer 1

Вы почти у цели. Вам просто нужно добавить col-sm-6 в столбец A и оболочку для столбцов B и C. См. Фрагмент ниже:

@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';

* {
color:#fff;
}

<div class="container">
<div class="row">
    <div class="col-md-4 col-sm-6 col-6"  style="background:blue">
    A
    </div>
    <div class="col-md-8 col-sm-6 col-6">
        <div class="row">
            <div class="col-md-6 col-sm-12" style="background:red">
            B
            </div>
            <div class="col-md-6 col-sm-12"  style="background:green">
            C
            </div>
        </div>
    </div>
<div>
</div>

PS: проверка в режиме полного просмотра страницы и наблюдение за изменением размера браузера