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

Question

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

例如，如果我在手机上：

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

是否可以在桌面上使用？

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

感谢您的帮助

Answer 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>