Reversed client select views on mobile

src/components/application/plexclient.vue

@@ -6,7 +6,6 @@
     <v-list-tile-content>
       <v-list-tile-title>{{ object.name }}<v-chip v-for="label in object.labels" :key="label[0]" :color="label[1]" small label>{{ label[0] }}</v-chip></v-list-tile-title>
       <v-list-tile-sub-title>{{ object.product }} - last seen {{ lastSeenAgo }}</v-list-tile-sub-title>
-
     </v-list-tile-content>
   </v-list-tile>
 </template>

src/components/application/walkthrough.vue

@@ -29,7 +29,7 @@
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
         </div>
         <v-layout v-else row wrap>
-          <v-flex xs12 md6 lg7>
+          <v-flex xs12 md6 lg7 v-if="!doReverse">
             <v-subheader>Plex Players {{ playercount }}</v-subheader>
             <v-list dense style="background: none">
               <plexclient v-for="i in recentClients" :key="i.clientIdentifier" @click.native="previewClient(i); ; gotResponse = true" :selected="isClientSelected(i)" :object="i" style="cursor: pointer"></plexclient>
@@ -74,6 +74,12 @@
               </div>
             </div>
           </v-flex>
+          <v-flex xs12 md6 lg7 v-if="doReverse">
+            <v-subheader>Plex Players {{ playercount }}</v-subheader>
+            <v-list dense style="background: none">
+              <plexclient v-for="i in recentClients" :key="i.clientIdentifier" @click.native="previewClient(i); ; gotResponse = true" :selected="isClientSelected(i)" :object="i" style="cursor: pointer"></plexclient>
+            </v-list>
+          </v-flex>
         </v-layout>
       </div>
     </v-flex>
@@ -105,6 +111,13 @@ export default {
     joinroom
   },
   computed: {
+    doReverse: function () {
+      switch (this.$vuetify.breakpoint.name) {
+        case 'xs': return true
+        case 'sm': return true
+        default: return false
+      }
+    },
     chosenClient: function () {
       return this.$store.getters.getChosenClient
     },