如何使用Tailwind CSS实现div移动端堆叠、桌面端行内排列

问题根因 #

order 排序属性仅在 flex 弹性容器或 grid 网格容器下生效，原有代码在移动端断点下父容器为 block 块级布局，设置的 order-1/order-2 规则完全不生效，同时缺少子元素居中的适配规则，无法达到预期效果。

修复后完整代码 #

<div class="flex flex-col md:flex-row md:justify-between items-center text-center md:text-left">
    <div class="order-2 md:order-1">Div 1</div>
    <div class="order-1 md:order-2">Div 2</div>
</div>

样式规则说明 #

• 父容器样式逻辑：
  • flex flex-col：移动端默认启用弹性纵向布局，保证order属性在全尺寸断点下可正常生效，子元素垂直堆叠
  • md:flex-row md:justify-between：md（桌面端）断点下切换为横向排列，子元素沿主轴两端对齐，实现Div1居左、Div2居右的同行效果
  • items-center：所有断点下子元素沿交叉轴居中，移动端实现内容水平居中的效果
  • text-center md:text-left：移动端文字居中对齐，桌面端文字左对齐
• 子元素原有order规则无需调整，在flex容器下可正常工作：
  • 移动端：Div2设置order-1排序优先级高于Div1的order-2，因此Div2显示在上方、Div1显示在下方
  • 桌面端：md断点下Div1为order-1、Div2为order-2，配合两端对齐规则匹配预期排列顺序

效果验证 #

• 桌面端（≥768px）：Div1居左、Div2居右，同行排列，文字左对齐
• 移动端（<768px）：Div2在上、Div1在下，垂直堆叠且水平居中，文字居中对齐

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