角度のある素材divはコンテンツを同じ方法でラップする必要があります

Question

複数の入力フィールドを持つ角度のある素材ページがあります。これらは、2つの細かい「箱」で注文されます。画面が大きければ、小さな画面に並べて表示する必要があります。

Input 1   Input 4 
Input 2   Input 5 
Input 3 

大きな画面では。そして、小さな画面上：

Input 1 
Input 2 
Input 3 
Input 4 
Input 5 

私は、それぞれの「ブロック」を中心に、すべて<div layout="row" layout-gt-xs="column">周りを使用しています。

私の問題は、2番目のブロックが大きな画面の最初のブロックと同じ高さで、入力フィールドが同じ行にないことです。これは良く見えません。これは、より次のようになります。

Input 1   Input 4 

Input 2 
       Input 5 
Input 3 

私が入力1と4（2と5）は（最初の例のように）同じ行に表示される順序で何をしなければなら？ <md-grid-list>を使用すると、小さな画面でアイテムオーダーが乱れるので、実際にはオプションではありません。事前にhttp://plnkr.co/edit/HrkLYYEowL31zqD0Jqq2?p=preview

ありがとう：ここ

は、完全なコード例です。

Answer 1

入力4と5のフレックス属性を削除するのはどうですか？

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