求助：在640px断点下实现Tailwind CSS Flex布局换行

要实现你的布局需求，核心是拆分内容模块并利用Tailwind的响应式类控制不同尺寸下的布局结构，具体思路如下：

• 拆分右侧内容：将标题与进度条、"parts"/"projects"文本分成两个独立模块
• 响应式控制外层布局：
  • 窗口宽度<640px（默认状态）：外层容器垂直排列，先放「图片+标题」的横向组合，再放进度条模块（占满整宽）
  • 窗口宽度≥640px（sm:前缀）：外层容器横向排列，图片在左，右侧垂直放置「标题+进度条模块」

修改后的代码如下：

<script src="https://cdn.tailwindcss.com"></script>

<div class="rounded-2xl bg-[#3B4E6A] flex flex-col sm:flex-row p-2">
  <!-- 图片容器 -->
  <div class="h-20 w-20 sm:w-[160px] sm:h-[160px] flex-shrink-0 mr-2">
    <img src="https://placehold.co/120x120" class="w-full h-full object-cover">
  </div>

  <!-- 标题容器：所有尺寸下都和图片在同一行 -->
  <div class="flex items-center flex-1">
    <p class="text-white font-semibold text-lg lg:text-2xl">some stuff here</p>
  </div>

  <!-- 进度条与文本模块：小屏下占满整宽，大屏下跟在标题下方 -->
  <div class="w-full sm:w-auto sm:ml-0 sm:mt-2 sm:flex-1">
    <div class="w-full bg-white rounded-full h-1 mt-2 sm:mt-0"></div>
    <div class="flex mt-2">
      <div class="text-white"><span class="font-medium"></span> <span>parts</span></div>
      <div class="text-white ml-4"><span class="font-medium"></span> <span>projects</span></div>
    </div>
  </div>
</div>

关键修改说明 #

1. 外层容器：用flex flex-col sm:flex-row实现小屏垂直、大屏横向的布局切换，同时添加p-2统一内边距
2. 图片容器：移除多余嵌套的flex容器，保留flex-shrink-0防止图片被压缩
3. 标题容器：用flex items-center flex-1确保标题在垂直方向居中，且能占据剩余空间
4. 进度条模块：
   • 小屏下w-full占满整宽，自动移到图片+标题下方
   • 大屏下sm:w-auto sm:mt-0回到右侧列，跟在标题下方，同时sm:flex-1让它能填充右侧剩余空间

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