如何更改md-grid-tile配置

Question

 <md-grid-list cols="2" rowHeight="100px">
  <md-grid-tile style="border: 1px solid black"
  *ngFor="let tile of [{cols : 2}, {cols : 2 }, {cols : 2 }, {cols : 1 }]; let index = index"
  [colspan]="tile.cols"
  [style.background]="tile.color">
     tile - {{index}}
 </md-grid-tile>
</md-grid-list>

我希望在宽度为＆lt; = 500px时改变cols的配置

 <md-grid-list cols="2" rowHeight="100px">
  <md-grid-tile style="border: 1px solid black"
  *ngFor="let tile of [{cols : 2}, {cols : 2 }, {cols : 2 }, {cols : 2 }]; let index = index"
  [colspan]="tile.cols"
  [style.background]="tile.color">
     tile - {{index}}
 </md-grid-tile>
</md-grid-list>