How to create a responsive (varying column count) Angular-Material card grid

Question

I\'m trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. Ideally, cards will be full-width for small screen widths and jump to two

Answer 1

If I understood the question right, this works like a charm:

Plunker with multiple breakpoints : (resize the inner window, not the browser window) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

The plunker has been updated to show cards with different height.
2 directives have been made, so the biggest height of all cards is kept in memory and this one is applied to all cards.