如何实现Bootstrap 4全宽行右列内容底部对齐且保持响应式？

我在定义Bootstrap 4全宽行时遇到问题：添加绝对定位实现右侧列内容底部对齐后，小屏幕下内容会重叠，无法正常分为两行独立显示；移除该样式后，响应式表现正常但失去底部对齐效果。

问题代码（添加绝对定位后）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div class="col-lg-6 col-md-12 p-4">
        <div style="position: absolute; bottom: 0;"> <!-- 此样式破坏响应式 -->
          <h2>Together, we empower software development around the world.</h2>
          <p class="lead py-2">Join our unique team of developers.</p>
        </div>
      </div>
    </div>
  </div>
</div>

正常响应式但无底部对齐的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
      </div>
      <div class="col-lg-6 col-md-12 p-4">
        <h2>Together, we empower software development around the world.</h2>
        <p class="lead py-2">Join our unique team of developers.</p>
      </div>
    </div>
  </div>
</div>

请问如何在不破坏响应式的前提下，实现右侧列内容的底部对齐？

用Bootstrap 4内置的Flex布局类就能完美解决，不需要用绝对定位这种会破坏响应式的方法：

1. 给内部的row添加align-items-stretch类，让同一行的列高度保持一致；
2. 给右侧列（包含文本的col-lg-6）添加d-flex flex-column justify-content-end类，将该列转为垂直方向的Flex容器，并让容器内的内容靠底部对齐。

修改后的完整代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
  <div class="container my-5">
    <div class="row align-items-stretch"> <!-- 添加此类让列等高 -->
      <div class="col-lg-6 col-md-12">
        <img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
      </div>
      <div class="col-lg-6 col-md-12 p-4 d-flex flex-column justify-content-end"> <!-- 添加Flex类实现底部对齐 -->
        <h2>Together, we empower software development around the world.</h2>
        <p class="lead py-2">Join our unique team of developers.</p>
      </div>
    </div>
  </div>
</div>

类作用说明 #

• align-items-stretch：强制同一row下的所有列高度拉伸至与最高列一致；
• d-flex：将元素转为Flex容器；
• flex-column：设置Flex容器的主轴方向为垂直；
• justify-content-end：让垂直主轴上的内容向容器末尾（底部）对齐。

这样处理后，大屏幕下右侧文本会底部对齐，小屏幕下列堆叠时内容也不会重叠，完全保留Bootstrap的响应式特性。

内容的提问来源于stack exchange，提问作者abenci