角度のある材料で反応するdiv

Question

divsを反応させることができません。どのように対応させるのですか？コンテンツボックスは、サイズが縮小されると、下に表示されます。以下は、別のコードとアングル材のWebサイトから取得したコードです。

  <h1>User List</h1> 
    <div class='md-padding' layout="row" flex> 
    <div layout="row" flex> 
     <div class="parent" layout="column" ng-repeat="user in users" flex> 
     <md-card> 
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
      <md-card-content> 
      <h2>{{user}}</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
      </md-card-content> 
      <div class="md-actions" layout="row" layout-align="end center"> 
      <md-button>Save</md-button> 
      <md-button>View</md-button> 
      </div> 
     </md-card> 
     </div> 
    </div> 
    </div> 

    </md-content> 

コードペンへのリンク enter link description here

Answer 1

ここでそれを行う方法の一例だ - CodePen

information in the docsは、応答性の設計については非常に有益です。

マークアップ

<div class='md-padding' layout="row" flex> 
     <div layout="row" layout-xs="column" flex> <!-- define layout here --> 
      <div class="parent" layout="column" ng-repeat="user in users" flex> 
       <md-card> 
        <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
        <md-card-content> 
         <h2 class="user">{{user}}</h2> 
         <p class="userInfo">Lorem ipsum</p> 
        </md-card-content> 
        <div class="md-actions" layout="row" layout-align="end center"> 
         <md-button>Save</md-button> 
         <md-button>View</md-button> 
        </div> 
       </md-card> 
      </div> 
     </div> 
    </div>