在不更改HTML的情况下，为移动和桌面视图重新安排flex项目

我在我的网页上使用有棱角的材料。对于桌面和移动设备，我必须以不同的方式显示相同的布局。以下是布局和相应的代码：

移动布局 手机代码

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

.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代码重复，以显示不同的布局。有没有什么方法可以在不重复代码的情况下显示这两种布局？

试试这个

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

儿童2
儿童1
儿童2
儿童3

---

Codepen

这是一个干净的解决方案，它使用了一个简单的html结构，对移动设备和桌面都是一样的，并使用媒体查询在更大的屏幕上重新定位

child2

.parent{
显示器：flex；
柔性流动：柱；
位置：相对位置；
}
.child1、.child2、.child3{
边框：1px纯黑；
背景颜色：灰色；
边缘底部：10px；
高度：20px；
}
.儿童2{
高度：40px；
}
@媒体屏幕和屏幕（最小宽度：500px）{
.儿童2{
位置：绝对位置；
排名：0；
左：0；
高度：52px；
宽度：150像素
}
.儿童1，
.儿童3{
左边距：150像素；
}
}

儿童1
儿童2
儿童3

看一看作为我的备选答案张贴在这里：感谢您指出答案。尽管如此，我不认为它适用于所有具有不同浏览器和屏幕方向的情况（比如，我需要为child1和child3设置不同的高度）。复制代码可能只是一个必要的缺点。有没有已知的桌面宽度，特别是Child2？好吧，如果你不反对绝对定位，那么一个版本的HTML仍然是可能的。看看我的答案。如果桌面宽度已知，这是非常简单的。