diff --git a/src/node_modules/components/GameListItem.svelte b/src/node_modules/components/GameListItem.svelte
index f6ae6b6..cd7746c 100644
--- a/src/node_modules/components/GameListItem.svelte
+++ b/src/node_modules/components/GameListItem.svelte
@@ -9,7 +9,7 @@
         <p class="game-item__caption"><a href={link}>{name}</a></p>
     </div>
     <div class="game-item__content">
-        <p><CopyArea value={playername} /><span class="game-item__icon material-icons">person</span></p>
-        <p><CopyArea value={gameid} /><span class="game-item__icon material-icons">code</span></p>
+        <p><span class="game-item__icon material-icons">person</span><CopyArea value={playername} /></p>
+        <p><span class="game-item__icon material-icons">code</span><CopyArea value={gameid} /></p>
     </div>
 </div>
diff --git a/src/style/components/_gameitem.scss b/src/style/components/_gameitem.scss
index 07ec871..e2d3250 100644
--- a/src/style/components/_gameitem.scss
+++ b/src/style/components/_gameitem.scss
@@ -2,9 +2,12 @@
     padding: 0.25rem 1rem;
     width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     @include transition;
-
+    
+    @include screen(lg) {
+        flex-direction: row;
+    }
     &:hover {
         background-color: $bg-secondary;
     }