title: Angular Material 2 md-card responsive columns
body: <p>I'm searching for an Angular 2/4 example of this layout. I need to start with two columns of cards (2 in left col, 1 in right col). However, if the screen is small, they should collapse to one column. I can do it in CSS with divs, but there must be an easy way in Material 2--there are lots of Material 1 examples.</p>
  
  <p>This code is adapted from an Angular Material 1 answer, but it's not working (I changed "row" to "column" hoping that would work but I just get one column with the three cards): </p>
  
  <p><a href="https://stackoverflow.com/questions/31823056/how-do-i-create-a-grid-of-cards-with-angular-material">how do i create a grid of cards with angular material?</a></p>
  
  <pre><code>&lt;div class='md-padding' layout="column" layout-wrap&gt;
      &lt;md-card flex="40" flex-sm="80"&gt;
        &lt;md-card-content&gt;
          &lt;h2&gt;Left Card 1&lt;/h2&gt;
        &lt;/md-card-content&gt;
      &lt;/md-card&gt;
  
      &lt;md-card flex="40" flex-sm="80"&gt;
        &lt;md-card-content&gt;
          &lt;h2&gt;Left Card 2&lt;/h2&gt;
        &lt;/md-card-content&gt; 
      &lt;/md-card&gt;
  &lt;/div&gt;
  
  &lt;div class='md-padding' layout="column" layout-wrap&gt;
      &lt;md-card flex="40" flex-sm="80"&gt;
        &lt;md-card-content&gt;
          &lt;h2&gt;Right Column &lt;/h2&gt;
        &lt;/md-card-content&gt;
      &lt;/md-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From the answer: "In this example, you will have two cards (40% each) and when the screen resizes to -sm, the cards will be at 80%."</p>