重新布置用于移动和桌面视图的弹性项目，而无需更改HTML

我正在为网页使用Angular Material。对于台式机和移动设备，我必须以不同的方式显示相同的布局。以下是布局和相应的代码：

移动版式 手机密码

    

        
Child 1
    
    

        
Child 2
    
    

        
Child 3
    

桌面布局 桌面代码

    

        
Child 2
    
    

        

            

                
Child 1
            
            

                
Child 3
            
        
    

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代码重复来显示不同的布局。是否有某种方式可以显示这两种布局而无需重复代码？

尝试这个

   

      
 Child 2
      

          
 Child 1
          
 Child 2
          
 Child 3
      
   

Codepen 在这里