List header styling on mobile view

- nearly to the same as in desktop view

client/components/lists/list.styl

@@ -157,18 +157,6 @@
     float: left
 
 @media screen and (max-width: 800px)
-  .list-header-menu
-    position: absolute
-    padding: 27px 19px
-    margin-top: 1px
-    top: -7px
-    margin-right: 7px
-    right: -3px
-
-  .list-header
-    .list-header-name
-      margin-left: 1.4rem
-
   .mini-list
     flex: 0 0 60px
     height: auto
@@ -212,7 +200,6 @@
     display: flex
     align-items: center
     .list-header-left-icon
-      display: inline
       padding: 7px
       padding-right: 27px
       margin-top: 1px
@@ -235,6 +222,26 @@
       right: 10px
       font-size: 24px
 
+  .list-header
+    display: grid
+    grid-template-columns: 30px 5fr 1fr
+    .list-header-left-icon
+      display: grid
+      grid-row: 1/3
+      grid-column: 1
+    .list-header-name
+      grid-row: 1
+      grid-column: 2
+      align-self: end
+    .cardCount
+      grid-row: 2
+      grid-column: 2
+      align-self: start
+    .list-header-menu
+      grid-row: 2
+      grid-column: 3
+      align-self: start
+
 .link-board-wrapper
   display: flex
   align-items: baseline