在移动/桌面布局之间更改组件的显示顺序

【问题标题】：change display order of components between mobile/desktop layout在移动/桌面布局之间更改组件的显示顺序
【发布时间】：2021-10-02 05:49:41
【问题描述】：

我想知道如何根据我是移动设备还是桌面格式来显示不同顺序的组件

例如，如果我有手机：

<compo-A></compo-A>
<compo-B></compo-B>

桌面可以有吗？

<compo-B></compo-B>
<compo-A></compo-A>

感谢您的帮助

【问题讨论】：

【解决方案1】：

您可以使用 flex order properties 来实现这一点（下面的示例将 FlexLayout 用于 Angular，但您可以使用 vanilla Flexbox 来实现）

<div fxLayout="row">
  <compo-A fxFlex fxFlexOrder.gt-md="2"></compo-A>
  <compo-B fxFlex fxFlexOrder.gt-md="1"></compo-B>
</div>

【讨论】：