JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://rawgit.com/akoenig/angular-deckgrid/master/angular-deckgrid.min.js"></script>
<div ng-app="app" ng-controller="DeckController" flex layout="column">
  <deckgrid class="deckgrid" flex source="data">
    <md-card>
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Resource Title</span>
          <span class="md-subhead">Resource Subtitle</span>
        </md-card-title-text>

        <md-card-title-media>
          <div class="md-media-lg card-media">
            <img ng-src="http://lorempixel.com/600/{{card.height}}/technics/{{card.index}}" alt="" />
          </div>
        </md-card-title-media>
      </md-card-title>

      <md-card-content>
        <p>It is a <a href="#">long established fact</a> that a reader will be distracted by the readable content of a page when looking at its layout.</p>

        <h4>More Ipsums</h4>

        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </md-card-content>

      <md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row">
        <a href="#">
          <i class="glyphicon glyphicon-file text-bigger"></i> More Related
          <i class="glyphicon glyphicon-chevron-right"></i>
        </a>
      </md-card-actions>
    </md-card>
  </deckgrid>
</div>

CSS

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 959px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

JavaScript

var foo = angular.module('app', ['ngMaterial', 'akoenig.deckgrid']);
foo.controller('DeckController', ['$scope', function($scope) {
  $scope.data = [{
    index: 1,
    height: 400
  }, {
    index: 2,
    height: 600
  }, {
    index: 3,
    height: 200
  }, {
    index: 4,
    height: 200
  }, {
    index: 5,
    height: 700
  }, {
    index: 5,
    height: 100
  }, {
    index: 7,
    height: 300
  }];
}]);