移动端屏幕下如何实现元素换行？Tailwind布局问题求助

你需要实现的效果是：屏幕宽度小于1024px时，“sponsored by”文本与50x50图片换行至80x80 Logo下方，且二者保持并排。当前代码的问题在于flex-wrap加错了位置，且外层flex容器未设置允许换行。

修改后的代码如下：

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

<div class="inline-block relative bottom-2 right-1">
  <!-- 外层flex容器：移动端允许换行，大屏幕保持横向排列 -->
  <span class="flex flex-wrap items-center text-blue lg:inline-flex">
    <img src="https://placehold.co/80x80"/>
   
    <!-- 内层flex容器：始终保持文本和小图并排 -->
    <div class="flex items-center justify-center text-black mt-2 lg:mt-0 lg:ml-2">
      <div class="sm:text-sm text-[10px]">sponsored by</div>
      <img class="ml-0.5 object-scale-down" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>

关键修改说明：

• 外层容器：将inline-flex替换为flex flex-wrap lg:inline-flex，在小于1024px的屏幕下允许flex容器换行，大屏幕则保持inline-flex的横向排列。
• 内层容器：添加flex items-center，确保文本和小图始终横向对齐；通过mt-2 lg:mt-0 lg:ml-2控制不同屏幕下的间距，移动端换行后给内层容器添加上边距，大屏幕则移除上边距并添加上左边距。
• 移除冗余属性：子元素上的flex-wrap无效，因为该属性仅作用于flex容器，而非子元素，直接删除即可。

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