Bootstrap 5 列排序问题：无法实现预期响应式布局

问题根源：原代码中标题列（col-lg-8）与图片列（col-lg-4）在大屏下刚好占满一行（12列），导致段落列只能从新行开始，无法紧贴标题下方。

最优解决方案：使用CSS Grid自定义大屏布局，结合Bootstrap的order类控制小屏顺序，无需重复内容即可实现需求：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
/* 大屏设备（lg及以上）使用Grid布局 */
@media (min-width: 992px) {
  .custom-layout-row {
    display: grid;
    grid-template-columns: 4fr 8fr; /* 图片占4份，右侧内容占8份 */
    grid-template-areas: 
      "image title"
      "image paragraph";
    gap: 1rem; /* 列间距，可根据需求调整 */
  }
  .image-block { grid-area: image; }
  .title-block { grid-area: title; }
  .paragraph-block { grid-area: paragraph; }
}
</style>

<div class="container">
  <div class="row custom-layout-row">
    <!-- 标题：小屏排第1，大屏占右侧上方区域 -->
    <div class="col-12 order-1 title-block">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <!-- 图片：小屏排第2，大屏占左侧区域 -->
    <div class="col-12 order-2 image-block">
      <img src="image.jpg" width="200" height="300">
    </div>

    <!-- 段落：小屏排第3，大屏占右侧标题下方区域 -->
    <div class="col-12 order-3 paragraph-block">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

方案说明：

• 小屏设备（<992px）：通过order类确保顺序为标题 → 图片 → 段落，各元素占满宽度垂直堆叠。
• 大屏设备（≥992px）：利用CSS Grid定义网格区域，图片固定在左侧，标题和段落依次排列在右侧，自然实现标题下方紧贴段落的效果。

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