Bootstrap Div Order (1 big div, 2 small divs)

Question

I am currently designing a site that I want to have a particular order of divs that differs between the desktop version, and the mobile version. In essence, I want to create this:

However, I currently have this:

Naturally, I understand that my code doesn't work right now. The container div prevents me from changing the order (at least in the sense that the text-area will never be able to go under the image like this). But I am having a really hard time trying the recreate the top image.

Every way I try it, in the desktop version, the text-area div always ends up below the image div, instead of below the logo div. Leaving a gap between the image and logo divs.

Here is a simplified version of my current code:

<header>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="headerImageContainer col-xl-6 offset-xl-1 col-12">
        <div class="headerImage"> 
            <img src="images/headerImage.jpeg" class="img-fluid"/> 
        </div>
      </div>
      <div class="col-xl-4 col-12">
        <div class="textAreaContainer"> 
            <img src="images/logoimage.png" class="img-fluid" />
            <div class="textContainer">
            </div>
        </div>
      </div>
    </div>
  </div>
</header>

Any insights on how I could achieve the top image would be much appreciated!