在移动版本中垂直对齐内容

Question

我对引导和它的工作方式非常陌生，我一直试图在移动版本中垂直对齐网站内的内容，当前的输出如下:当前输出：

​

​

如何垂直对齐联系人部分，使其恰好位于新闻部分和教育部分之上。

如能提供任何帮助，将不胜感激。

到目前为止，我使用引导代码的HTML：

<div class="container px-4 py-5" id="featured-3">
  <h2 class="pb-2 border-bottom">About Inholland</h2>
  <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <!--<svg class="bi" width="1em" height="1em"><use xlink:href="#collection" /></svg>-->
        <svg style="color: #fff" class="bi text-white" width="1em" height="1em">
          <use xlink:href="#collect-icon" class="bi bi-collection"></use>
        </svg>
      </div>
      <h2>News</h2>
      <p>View up to date news about inholland organisation and its employees</p>
      <a style="color: #e3027f" href="#" class="icon-link">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#people-circle" />
        </svg>
      </div>
      <h2>Contacts</h2>
      <p>
        Learn more about our organisations chairman, faculty members and
        contacts to reach if you have any issues
      </p>
      <a style="color: #e3027f" href="#" class="icon-link">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <!--<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2" /></svg>-->
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#toggle-icon" />
        </svg>
      </div>
      <h2>Education</h2>
      <p>
        Explore various types of courses provided by inholland university in
        different types of faculties
      </p>
      <a style="color: #e3027f" href="#" class="icon-link bg-#e3027f">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
  </div>
</div>

Answer 1

在容器行中添加align-items-end：

<div class="row g-4 py-5 row-cols-1 row-cols-lg-3 align-items-end">