Flexbox布局：如何调整Div顺序并实现移动端多行排列？

布局要求 #

• 桌面端：Div one、Div two、Div three 三个元素在同一行排列
• 移动端：Div one 与 Div two 并排显示，Div three 位于二者下方

桌面端实现代码 #

<div class="parent flex items-center justify-between">
  <div class="flex flex-1">Div one</div>
  <div class="flex flex-1 sm:order-last sm:flex-col">Div two</div>
  <div class="flex flex-1">Div three</div>
</div>

移动端实现代码 #

<div class="parent flex items-center justify-between">
  <div class="flex flex-1">Div one</div>
  <div class="flex flex-1">Div three</div>
  <div class="flex flex-1 sm:order-last sm:flex-col">Div two</div>
</div>

布局效果示意图 #

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