Angularjs 角度材质div应以相同的方式包装其内容

我有一个带有几个输入字段的角度材质页面。这些产品被订购在两个虚拟“盒子”中。如果屏幕较大，则框应并排显示，并在小屏幕上相互显示

Input 1         Input 4
Input 2         Input 5
Input 3

在更大的屏幕上。在较小的屏幕上：

Input 1
Input 2
Input 3
Input 4
Input 5

我在每个“块”和所有东西周围使用

我的问题是，在更大的屏幕上，第二个块和第一个块一样高，并且输入字段不在同一行中，这看起来不太好。看起来更像这样：

Input 1         Input 4

Input 2
                Input 5
Input 3

为了使输入1和4（2和5）显示在同一行（如第一个示例中），我应该做什么？如果我使用

的话，小屏幕上的商品订单就会混乱不堪，因此这不是一个真正的选项

下面是一个完整的代码示例：

---

提前感谢。

删除Input 4和Input 5的flex属性如何

<div flex layout="column">

    <md-input-container >
        <label>Input 4</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>
    <md-input-container >
        <label>Input 5</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>

</div>

输入4
输入5

删除输入4和输入5的flex属性如何

<div flex layout="column">

    <md-input-container >
        <label>Input 4</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>
    <md-input-container >
        <label>Input 5</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>

</div>

输入4
输入5

谢谢！我以为flex只会改变水平布局，但我显然错了。谢谢！我以为flex只会改变水平布局，但我显然错了。