Как переместить элемент из одного столбца начальной загрузки в другой столбец при достижении точки останова?

Question

Я хочу переместить card 5 из 2nd column в card 1 из 1st column, когда конкретная точка останова (вероятно, на маленьких экранах).

Я не могу изменить весь макет сейчас, но этотребуется.!

<div class="container">
    <div class="row no-gutters">
        <div class="col-lg-6">
            <!-- Card 1 -->

            <!-- Card 2 -->

            <!-- Card 3 -->

            <!-- Card 4 -->

        </div>
        <div class="col-lg-6">
            <!-- Card 5 -->

            <!-- Card 6 -->

            <!-- Card 7 -->

        </div>
    </div>
</div>

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

ПРИМЕЧАНИЕ: (Другой способ)Я могу полностью удалить 2nd column в определенную точку останова, затем я могу расположить каждую карту с помощью flex-box order.Если бы я только мог удалить второй столбец полностью с помощью css или javascript в этой конкретной точке останова!

Любая помощь будет оценена!:)