Bootstrap4同行不同列场景下如何将一段文本放置在另一段文本下方

问题原因 #

你给col-7添加了d-flex类后，该容器的所有直接子元素默认会沿水平方向排列，所以两段文字和右侧的数字图片被放在了同一行，自然没法实现文字上下排布的效果。

解决方法 #

你可以把两段文字单独放到一个垂直排列的flex容器里，再让这个文字容器和右侧的图片在col-7内水平排列即可，修改后的代码如下：

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Body -->
<div class="row mt-3">
  <div class="col-7 border d-flex align-items-center justify-content-between">
    <!-- 新增文字容器，设置垂直排列 -->
    <div class="d-flex flex-column">
      <p class="mb-3 text-right" style="color: #00A0DE; font-size: 50px;">Choose it</p>
      <p class="border" style="color: #323e48;">Select your favorite <br>product</p>
    </div>
    <img src="../../../assets/images/Generals/Number1.PNG" alt="数字1" width="100" height="100">
  </div>
  <div class="col-5">
    <div class="semirounded-square-2">
      <div>
        <img src="../../../assets/images/Generals/Character_1.png" alt="角色图" width="250" style="padding-bottom: 100px;">
      </div>
    </div>
  </div>
</div>

调整说明 #

• 新增的文字容器使用flex-column让内部两段文字垂直排布
• 给col-7加了align-items-center让文字和图片垂直居中，justify-content-between实现两端对齐，不需要手动写死外边距
• 删掉了冗余的<br>标签、重复的style属性、没用的d-block声明（p标签本身就是块级元素）

内容的提问来源于stack exchange，提问作者The Grumpy Lion