CSS: Center logo and brand name on narrow screens (RefugeRestrooms#611)

* _mobile.scss: Lower logo/brand on narrow screens

Adjust the CSS "top" property to set the logo and "brand name"
("Refuge Restrooms") slightly lower within the navbar on narrow
screens.

This is to adjust for the navbar being responsively taller
on narrower screens. "767px screen width" happens to be the responsive
threshold for that height change for the navbar.

* _mobile.scss: Move 342px rules, adjust whitespace

Moved the "max 342px" rules to the bottom, so all screen-width-related
style rules are in descending order of the sizes that they apply to.
(For consistency).

Adjusted the use of newlines in this stylesheet to be more consitent.

app/assets/stylesheets/_mobile.scss

@@ -8,15 +8,9 @@
 
 // Screen Width-Related Rules
 
-@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
-
-    button.splash-add-restroom-btn > i.fa-plus-square-o {
-        margin-left: 2%;
-    }
-
-    .nav-column {
-        padding-left: 0;
-        padding-right: 0;
+@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
+    .navbar-default .toiletLogo {
+        top: 8px;
     }
 }
 
@@ -54,9 +48,9 @@
     }
     .showPageContent {
         padding: 10px;
-
     }
 }
+
 @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
     .container {
         width: 100%;
@@ -90,6 +84,17 @@
         font-size: 15px;
     }
 }
+
+@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
+    button.splash-add-restroom-btn > i.fa-plus-square-o {
+        margin-left: 2%;
+    }
+    .nav-column {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
 a.iconLink:hover {
     text-decoration: none;
 }