小屏幕Flex列布局：如何让标题文本保持在图片右侧

要实现需求，核心是调整布局结构，让「标题」和「图片」在小屏幕时保持横向排列，同时让「进度条+统计文本」单独占据模块的整行宽度，位于图片下方。以下是修改后的代码及关键说明：

修改后的代码 #

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col rounded-2xl bg-[#3B4E6A] md:flex-row">
  <!-- 图片与标题的横向容器 -->
  <div class="flex items-start">
    <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px]">
      <img src="https://placehold.co/160x160" />
    </div>
    <div class="mt-1 mr-2">
      <p class="text-md font-semibold text-white lg:text-2xl">Title stuff here</p>
    </div>
  </div>
  <!-- 进度条与统计文本容器（占满整行） -->
  <div class="w-full px-2 pb-3">
    <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
      <!-- Progress bar content here -->
    </div>
    <div class="mt-3 flex text-white">
      <div class="flex items-center md:w-auto mr-6">
        <span class="font-medium">1</span>
        <span class="ml-1">Parts</span>
      </div>
      <div class="flex items-center md:w-auto">
        <span class="font-medium">1</span>
        <span class="ml-1">Projects</span>
      </div>
    </div>
  </div>
</div>

关键调整点 #

• 拆分布局结构：将原有的嵌套结构拆分为两部分：
  1. 用flex items-start容器包裹图片和标题，小屏幕下默认横向排列，保证标题始终在图片右侧。
  2. 把进度条和统计文本单独作为最外层容器的子元素，设置w-full使其占满模块宽度，自然落在图片和标题下方。
• 细节优化：给标题容器添加右侧边距、给进度条容器添加上下内边距，避免小屏幕下内容贴边，提升视觉体验。

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