Bootstrap Div Order（1个大div，2个小div）

Question

我目前正在设计一个网站，该网站希望具有特定的div顺序，该顺序在台式机版本和移动版本之间是不同的。本质上，我想创建这个：

但是，我目前有这个：

自然，我知道我的代码现在无法正常工作。容器div阻止我更改顺序（至少在某种意义上说，文本区域将永远无法进入这样的图像下方）。但是我很难尝试重新创建顶部图像。

我尝试用各种方法在台式机版本中，文本区域div始终位于图像div之下，而不是徽标div之下。在图像和徽标div之间留出空隙。

这是我当前代码的简化版本：

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

任何对如何获得最佳形象的见解将不胜感激！