html - 在不更改 HTML 的情况下为移动和桌面 View 重新安排 flex 元素

Question

我正在为我的网页使用 Angular Material。我必须以不同的方式为桌面和移动设备显示相同的布局。以下是布局和相应的代码:

移动布局 手机代码

<div layout="column" style="text-align: center;">
    <div flex-order="0">
        <div class="child-1">Child 1</div>
    </div>
    <div flex-order="1">
        <div class="child-2">Child 2</div>
    </div>
    <div flex-order="2">
        <div class="child-3">Child 3</div>
    </div>
</div>

桌面布局 桌面代码

<div layout="row" style="text-align: center;">
    <div flex-order="0">
        <div class="child-2">Child 2</div>
    </div>
    <div flex>
        <div layout="column">
            <div flex-order="0">
                <div class="child-1">Child 1</div>
            </div>
            <div flex-order="1">
                <div class="child-3">Child 3</div>
            </div>
        </div>
    </div>
</div>

CSS 代码

.child-1, .child-2, .child-3 {
    border: 1px solid black; 
    background-color: gray; 
    margin-bottom: 10px;
}
.child-1, .child-3 {
    height: 20px;
}
.child-2 {
    height: 40px;
}

有一个明显的 HTML 代码重复来显示不同的布局。有没有什么方法可以在不重复代码的情况下显示这两种布局？

Answer 1

试试这个

   <div layout-sm="column" layout-gt-sm="row">
      <div hide-sm hide-xs style="background:grey" layout-margin> Child 2</div>
      <div layout="column" layout-align="space-around">
          <div  style="background:grey" layout-margin> Child 1</div>
          <div hide-gt-sm style="background:grey"layout-margin > Child 2</div>
          <div  style="background:grey" layout-margin> Child 3</div>
      </div>
   </div>

代码笔 here