title: Responsive Design using md-grid-list in angular 2
body: <p>I am looking at basic example of <strong>md-grid-list in Angular 2</strong>.</p>
  
  <p>HTML Code :</p>
  
  <pre><code>&lt;md-grid-list cols="4" rowHeight="100px"&gt;
     &lt;md-grid-tile *ngFor="let tile of tiles"
           [colspan]="tile.cols"
           [rowspan]="tile.rows"
           [style.background]="tile.color"&gt;
           {{tile.text}}
      &lt;/md-grid-tile&gt;
  &lt;/md-grid-list&gt;
  </code></pre>
  
  <p>TS Code : </p>
  
  <pre><code>export class GridListDynamicExample {
    tiles = [
      {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
      {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
      {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
      {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
    ];
  }
  </code></pre>
  
  <p>The above code results in this : 
  <a href="https://i.stack.imgur.com/38rEY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/38rEY.png" alt="enter image description here"></a>
  <strong>How can I make the layout as "column" that is column "Two" to go below the rows(One and Four) on smaller screen size using some HTML directive or CSS?</strong></p>
  
  <p>Angular Material in Angular 1 had option to achieve by specifying "md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" ".</p>