似乎无法正确设置我的引导网格/伸缩框

Question

我正在使用Bootstrap 4，并且正在尝试为客户建立网站，但是我似乎无法使网格按照我的意愿进行行为/扩展。

这是我要实现的目标的粗略概图。

桌面布局草图：

移动版式草图：

这是我目前拥有的代码段，适用于台式机尺寸，但是当尺寸变为移动尺寸时会完全崩溃。

<div class="container">
  <div class="row">
    <div class="col-sm">
      <h1 class="main-cap">Your Caption. Goes Here.</h1>
      <div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Vivamus in nisl
        tempor, porttitor quam eu, lacinia nibh. Etiam
        interdum est magna, vel ullamcorper arcu
        dignissim sit amet. Nullam commodo elementum
        felis, id congue dui facilisis sit amet. </div>
    </div>
    <div class="col-sm hidden-xs">
      <img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
      <div class="col-xs-6 style="padding-left: 30px;">
        <button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
             Learn more
          <i class="material-icons arrow-right">keyboard_arrow_right</i>
        </button>
      </div>
  </div>
  <div class="row">
      <div class="socials col-xs-6"></div>
      <div class="email-form col-xs-6"></div>
  </div>

感谢您的帮助。 谢谢。

Answer 1

您的代码中缺少标签和双引号...要获得所需的效果，您必须插入两次（“图像”或“描述和按钮”），然后在适当的断点处对其进行切换。 ..

下面的代码代码段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <h1 class="main-cap">Your Caption. Goes Here.</h1>
      <div class="col-12 col-md-6 d-block d-sm-block d-md-none" style='border:1px solid pink'>
        <img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
      </div>
      <div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisl tempor, porttitor quam eu, lacinia nibh. Etiam interdum est magna, vel ullamcorper arcu dignissim sit amet. Nullam commodo elementum felis, id congue dui facilisis sit amet.
      </div>

      <button type="button" class="learn-more btn btn-primary ">
             Learn more
          <i class="material-icons arrow-right">keyboard_arrow_right</i>
        </button>
    </div>
    <div class="col-12 col-md-6 d-none d-sm-none d-md-block" style='border:1px solid red'>
      <img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
    </div>
  </div>
</div>