基于断点的角材料动态网格列表列

Question

我的屏幕上显示了3张卡，卡1和2并排放置，卡3占据了整个宽度。

问题是，在移动设备视图中，卡未堆叠在一起。请在这里告诉我我做错了什么？

Component.html

 <mat-grid-list cols="4">
      <mat-grid-tile *ngFor="let card of cardsData" [colspan]="card.cols" [rowspan]="card.rows">
        <mat-card >
          <mat-card-header>
            {{ card.title }}
          </mat-card-header>
          <mat-card-content>
          </mat-card-content>
          <mat-card-footer>
            <a href="">VIEW MORE</a>
          </mat-card-footer>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>

Component.ts

export class Component implements OnInit {
  public cardsData;
  ngOnInit() {
              this.cardsData = [
        { title: 'Card 1', cols: 2, rows: 1, item: 'Card 1' },
        { title: 'Card 2', cols: 2, rows: 1, item: 'Card 2' },
        { title: 'Card 3', cols: 4, rows: 1, item: 'Card 3' }
    ];
  }
}