屏幕变小时内容中断 bootstrap

Question

这并没有像我想要的那样中断，我希望当屏幕尺寸变小时，图像位于按钮上方但位于文字下方，例如 phone 尺寸。我是 bootstrap 你的新手，除了查看文档外我没有尝试太多，但还没有找到我的解决方案。 sonmeone 可以帮我指出这个问题在哪里以及为什么会发生吗？谢谢！

        <div class="row">
          <div class="col-sm-6 text-center h-80 text-center">
              <p style="display: flex;
              padding-inline-start: 140px;
              justify-content: center;
              margin: 0;
              align-items: center;
              text-align: center;
              font-family: Dancing Script, 'sans serif';
              width: 80%;
              height: 50%;
              color: white;
              font-size: 80px">So you want to travel the world</p>
              <p style=" display: flex;
              color: white;
              padding-inline-start: 60px;
              width: 100%;
              height: 20%;
              font-size: 30px;">I do not have millions in the bank but I am making it happen without stress or worry.</p>
              <button style="border: none;
              color: white;
              font-size: 30px;
              background-color: rgba(201,115,116,255);
              border-radius: 5px;
              height: 60px;
              cursor: pointer;
              width: 400px;">Download!</button>
          </div>
          <div class="col-md-6  text-center">
            <img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height: 700px; width: 1300px;" alt="">
          </div>
        </div>
      </div>

Answer 1

图片不能位于按钮上方，因为它们位于不同的列中。

<div class="container">
<div class="row">
          <div class="col-sm">
              <p>So you want to travel the world</p>
              <p>I do not have millions in the bank but I am making it happen without stress or worry.</p>
          </div>
          <div class="col-sm">
            <img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height:   700px; width: 700px;" alt="">
          </div>
          
          <div class="col-sm-12">
              <button> Download!</button>
          </div>
        </div>
</div>

这基本上就是您想要的，对吧？下载按钮位于文本和图像下方，除了在它们全部堆叠的小屏幕上？我也会按照上面给出的建议将所有 CSS 移动到外部文件并使用 bootstrap 实用程序类.

我也会尽可能避免在文件名中使用 A-z/0-9 以外的字符。

屏幕变小时内容中断 bootstrap

Content breaking when screen gets smaller bootstrap

html

css

bootstrap-5