Angular Material transform table to boxes on small screens
<p>I have an AngularJS website with the Angular Material design. On one screen I have a table and right there is my problem, because tables in Material design aren't really responsive.</p>

<p>My question: Is it possible to show the normal table on big screens and transform the table information from single lines to a box-like layout when the page is displayed on smaller screens? Something like this:</p>

<pre><code>Name   |   City   |   Gender
------------------------------
Alice  |   NY     |   f
Bob    |   LA     |   m
</code></pre>

<p>This table on big screens. And the following design on smaller screens. </p>

<pre><code>Name   Alice
City   NY
Gender f
-------------
Name   Bob
City   LA
Gender m
</code></pre>

<p>I am aware of the layout options with the screen sizes (xs, sm, ...).</p>

<p>I tried to show tables based on this code on smaller screens, but then all the information are in a single line. And not one line for every attribute.</p>

<pre><code>&lt;tr md-row ng-repeat="person in persons"&gt;
  &lt;th md-cell&gt;Name&lt;/th&gt;
  &lt;td md-cell&gt;{{person.name}}&lt;/td&gt;
  &lt;th md-cell&gt;State&lt;/th&gt;
  &lt;td md-cell&gt;{{person.state}}&lt;/td&gt;
  &lt;th md-cell&gt;Gender&lt;/th&gt;                   
  &lt;td md-cell&gt;{{person.gender}}&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>Result:</p>

<pre><code>Name Alice City NY Gender f
...
</code></pre>

<p>Is there any good solution for my problem? Or another approach I am not aware of?</p>