Is it possible to reposition a <div> into another using bootstrap?

I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:

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

|Button|

The mobile view has it looking like:

|h1|

|p|

|button|

Because of the grid, the h1 and button are in 1 div and the P is in it's own div.

The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this.

<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>

As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.