chore(demos): update list styles for mobile

Author: kara

src/demo-app/demo-app.html

@@ -3,18 +3,18 @@
     <md-nav-list>
       <a md-list-item [routerLink]="['ButtonDemo']">Button</a>
       <a md-list-item [routerLink]="['CardDemo']">Card</a>
-      <a md-list-item [routerLink]="['ProgressCircleDemo']">Progress Circle</a>
-      <a md-list-item [routerLink]="['ProgressBarDemo']">Progress Bar</a>
-      <a md-list-item [routerLink]="['PortalDemo']">Portal</a>
-      <a md-list-item [routerLink]="['OverlayDemo']">Overlay</a>
       <a md-list-item [routerLink]="['CheckboxDemo']">Checkbox</a>
+      <a md-list-item [routerLink]="['GesturesDemo']">Gestures</a>
       <a md-list-item [routerLink]="['InputDemo']">Input</a>
-      <a md-list-item [routerLink]="['ToolbarDemo']">Toolbar</a>
-      <a md-list-item [routerLink]="['RadioDemo']">Radio</a>
       <a md-list-item [routerLink]="['ListDemo']">List</a>
       <a md-list-item [routerLink]="['LiveAnnouncerDemo']">Live Announcer</a>
+      <a md-list-item [routerLink]="['OverlayDemo']">Overlay</a>
+      <a md-list-item [routerLink]="['PortalDemo']">Portal</a>
+      <a md-list-item [routerLink]="['ProgressCircleDemo']">Progress Circle</a>
+      <a md-list-item [routerLink]="['ProgressBarDemo']">Progress Bar</a>
+      <a md-list-item [routerLink]="['RadioDemo']">Radio</a>
       <a md-list-item [routerLink]="['SidenavDemo']">Sidenav</a>
-      <a md-list-item [routerLink]="['GesturesDemo']">Gestures</a>
+      <a md-list-item [routerLink]="['ToolbarDemo']">Toolbar</a>
     </md-nav-list>
     <button md-raised-button (click)="start.close()">CLOSE</button>
   </md-sidenav>

src/demo-app/list/list-demo.html

@@ -39,22 +39,6 @@ <h4 md-line>{{message.from}}</h4>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>
     </md-list>
-    <div *ngIf="infoClicked">
-      More info!
-    </div>
-    <md-nav-list>
-      <md-list-item *ngFor="#link of links">
-        <a md-line href="http://www.google.com">{{ link.name }}</a>
-        <button md-icon-button (click)="infoClicked=!infoClicked">
-          <i class="material-icons">info</i>
-        </button>
-      </md-list-item>
-    </md-nav-list>
-    <md-nav-list>
-      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
-        {{ link.name }}
-      </a>
-    </md-nav-list>
   </div>
 
   <div>
@@ -82,18 +66,38 @@ <h4 md-line>{{message.from}}</h4>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
       </md-list-item>
     </md-list>
-    <md-nav-list dense>
+  </div>
+  <div>
+    <h2>Nav lists</h2>
+    <md-nav-list>
+      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+        {{ link.name }}
+      </a>
+    </md-nav-list>
+    <div *ngIf="infoClicked">
+      More info!
+    </div>
+    <md-nav-list>
       <md-list-item *ngFor="#link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
           <i class="material-icons">info</i>
         </button>
       </md-list-item>
     </md-nav-list>
-    <md-nav-list dense>
+    <md-nav-list>
       <a md-list-item *ngFor="#link of links" href="http://www.google.com">
-        {{ link.name }}
+        <span md-line>{{ link.name }}</span>
+        <span md-line class="demo-secondary-text"> Description </span>
       </a>
     </md-nav-list>
+    <md-nav-list dense>
+      <md-list-item *ngFor="#link of links">
+        <a md-line href="http://www.google.com">{{ link.name }}</a>
+        <button md-icon-button (click)="infoClicked=!infoClicked">
+          <i class="material-icons">info</i>
+        </button>
+      </md-list-item>
+    </md-nav-list>
   </div>
 </div>

src/demo-app/list/list-demo.scss

@@ -1,27 +1,23 @@
 
 .demo {
-  width: 350px;
   display: flex;
+  flex-flow: row wrap;
 
   md-list, md-nav-list {
     border: 1px solid rgba(0,0,0,0.12);
     width: 350px;
-    margin: 20px;
+    margin: 20px 20px 0 0;
 
   }
   h2 {
-    margin: 0 20px;
+    margin-top: 20px;
   }
 
   i {
     color: rgba(0,0,0,0.12);
   }
 }
 
-.demo-button {
-  margin: 20px;
-}
-
 .demo-secondary-text {
   color: rgba(0, 0, 0, 0.54);
 }