是否可以使用引导程序将<div>重新定位到另一个？

Question

我目前正在使用引导程序网格系统进行定位的登录页面上，桌面视图的布局看起来像这样：

| h1 | ------------------------ | p |

|按钮|

移动视图的外观如下：

| h1 |

| p |

|按钮|

由于网格的原因，h1和按钮位于1格中，而P位于其自己的格中。

简单的解决方案是仅基于断点隐藏div，但是我正在尝试避免这种情况。我尝试使用order类将页面上的其他元素与其他元素一起移动，但是看到父元素是网格中的2个对象，而不是它们的子对象，因此无法正常工作。我也可以使用JS来做到这一点，但我也想避免这样做。

<section class="test">
        <div class="container">
            <div class="test--content row justify-content-lg-center text-lg-left">
                <div class="test--cta col-12 col-lg-5">
                    <h1>Headline</h1>
                    <div class="button main">CTA</div>
                </div>
                <div class="contact--text col-12 col-lg-5">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </section>

正如我所提到的，CSS和JS的解决方案非常清晰，但是由于我几乎没有使用Bootstrap，所以我很想知道在不使用上述解决方案的情况下这是否可行，或者是否有解决办法使用Bootstrap。