在 mobile/desktop 布局之间更改组件的显示顺序

Question

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

例如，如果我有手机：

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

桌面端可以吗？

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

感谢您的帮助

Answer 1

您可以使用 flex order properties (example below uses FlexLayout for 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>

change display order of components between mobile/desktop layout