Bootstrap4移动端如何强制div脱离父容器、下移至父行且不改变父高

我基于Bootstrap 4开发页面时，在col类容器内部嵌套了row类结构，目前桌面端的显示效果完全符合设计预期，但移动端需要对布局做调整：

• 将嵌在col内部的row强制放置在它的父级row的下方
• 实现过程中要满足两个约束：让元素跳出父容器的原有布局范围，同时完全不改变父容器原本的高度尺寸

我当前没有编写任何自定义CSS，使用的是纯基础Bootstrap结构，现有代码如下：

<div id="jumbo" class="row">
    <div id="info" class="col-xl-6 col h-100">
      <div class="row">
        <div id="info-text" class="col offset-md-2">
          <p class="display-4">Estate planning made easy</p>
          <p>
            Let’s get a clear plan in place for your money,<br> 
            property and other assets here and now.<br> 
            It’s never too early to protect what’s important<br>
            to you and your family.
          </p>
          <p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
          <button class="btn btn-brand-secondary">Start Now</button>
        </div>
      </div>
    </div>
  </div> 

效果参考说明：桌面端为既定的标准布局效果；移动端的目标效果是让原本嵌在col内部的内容块脱离父col的布局约束，排布到外层父row的下方，全程不挤压父col空间、不改动父级row的原有高度。

内容的提问来源于stack exchange，提问作者Web Develop Wolf