fix onboarding and make mobile <600px

src/components/app.jsx

@@ -528,7 +528,7 @@ export default class App extends Component {
 	}
 	toggleLayout(mode) {
 		/* eslint-disable no-param-reassign */
-		mode = window.innerWidth < 500 ? 2 : mode;
+		mode = window.innerWidth < 600 ? 2 : mode;
 
 		if (this.state.currentLayoutMode === mode) {
 			this.contentWrap.resetSplitting();

src/style.css

@@ -125,7 +125,7 @@ p {
 	margin-top: 0;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 600px) {
 	.block--mobile {
 		display: block;
 	}
@@ -137,10 +137,13 @@ p {
 	}
 }
 
-@media screen and (min-width: 501px) {
+@media screen and (min-width: 601px) {
 	.show-on-mobile {
 		display: none;
 	}
+	.flex--desk {
+		display: flex;
+	}
 }
 
 hr {
@@ -1481,13 +1484,10 @@ body:not(.is-app) .show-when-app {
 	visibility: visible;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;
 	}
-	.flex--desk {
-		display: flex;
-	}
 	.main-header {
 		overflow-x: auto;
 	}