Адаптивный перестановка в стиле начальной загрузки

Question

С помощью Bootstrap 4 возможно перейти с

|   | b |   |
| a |---| c |
|   | d |   |

on xs to

|         | a |
|         |---|
|    b    | c |
|         |---|
|         | d |

на см и выше?

Просматривал документацию по flex и не может найти способ добиться как без сокрытия, так и выявления дублирующих элементов макета.

<div class="container pl-0 pr-0">
    <div class="row no-gutters">
        <div class="col-2 categories">
            a
        </div>
        <div class="col-8">
            <div class="mainPanel">
                b
            </div>
            <div class="colors">
                d
            </div>
            <div class="item"><< Select Item >></div>
        </div>
        <div class="col-2 patterns">
            c
        </div>
    </div>
</div>

Это первый пример, но вложение b и d в другой div означает, что они не могут быть переупорядочены, как я хочу.