如何在角度材质中使用layout = row / column在div中浮动元素？

Question

我使用以下代码在一行中排列两个div块

 <div layout="column" layout-gt-xs="row" layout-align="center center" id="row">
  <div id="a">a</div>
  <div id="b">b</div>
</div>

css就像这样

#row div {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  margin:10px;
  text-align:center;
}

我想让它在小屏幕上响应，它重新排列为this

如何在Angular材料中实现这一目标？ 我尝试使用

这样做

#b {
     float: left !important;
  }

但似乎浮动在布局容器中不起作用。

这是demo

Answer 1

不要将弹性布局与float混合。您可以使用角度素材flex-order来执行此操作。 https://material.angularjs.org/latest/layout/children

<div flex-order="1">a</div>
<div flex-order="0" flex-order-gt-xs="2">b<br/>(pull it to the left)</div>

Answer 2

你应该在你的标记中放#b之前的#b，然后将#a向左，＃b向右浮动。如果需要，您可以在@media查询中删除它。

或者你可以使用flexbox ......