我在为引导带中的嵌套列构建响应式布局时遇到问题

Question

我在figma上整理了以下布局：

到目前为止，我已经为布局设置了以下网格：

<div class="container-fluid"> 
  <div class="row" id="sobre-nos-wrapper">
      <div class="col">
        <div class="row">
          <div class="col">
            <h1>Title</h1>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col">
            <p>
              Text 1
            </p>
          </div>
          <div class="col">
            <p>
             Text 2
            </p>
          </div>
          <div class="col">
            <p>
             text 3
            </p>
          </div>
          <div class="col-sm-12 col-md-4">
            <img class ="" src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望我的特大号和特大号 (>= 992px) 在一个视口中显示上面的设计，中号 (>= 678) 只在整个视口中显示文本，小号和特小号 (>576 ) 以在整个视口（标题、单个段落和图片）中分别显示所有元素。任何帮助和/或建议将不胜感激！如果您需要任何进一步的信息，请告诉我。

Answer 1

快速破解它。我希望这能让你指出正确的方向：

<div class="container-fluid"> 
         <div class="row" id="sobre-nos-wrapper">
             <div class="row">
                 <div class="col-sm-12">
                    <h1>Title</h1>
                 </div>
             </div>
             <div class="row">
            <div class="col-md-3">
                <p>Text 1</p>
          </div>
          <div class="col-md-3">
            <p>Text 2</p>
          </div>
          <div class="col-md-3">
            <p>text 3</p>
          </div>
          <div class="col-sm-12 col-md-3">
            <img class ="" src="" alt="">img
          </div>
        </div>
    </div>
  </div>
</div>