Brompton: Only display 3 columns in the header when we have 3 elements

brompton/sass/_extra-child-theme.scss

@@ -128,23 +128,25 @@
 
 	@include media(laptop) {
 		flex-flow: row wrap;
-		justify-content: flex-start;
+		justify-content: center;
 
-		.site-branding,
-		.main-navigation,
-		.social-navigation {
+		& > *:nth-child(1):nth-last-child(3),
+		& > *:nth-child(2):nth-last-child(2),
+		& > *:nth-child(3):nth-last-child(1) {
 			margin: 0 #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 			width: 33.3333%;
 			width: calc(33.3333% - #{map-deep-get($config-global, "spacing", "horizontal")})
 		}
 
+		& > *:nth-child(2):nth-last-child(2) {
+			order: 1;
+		}
+
 		.site-branding {
 			order: 2;
 		}
 
 		.main-navigation {
-			order: 1;
-
 			& > div > ul {
 				justify-content: flex-start;
 			}

brompton/style-rtl.css

@@ -2166,11 +2166,6 @@ table th,
 	z-index: 1;
 }
 
-.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
-	cursor: pointer;
-	z-index: 99999;
-}
-
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2183,14 +2178,6 @@ table th,
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
-	.main-navigation > div > ul li[focus-within] > ul,
-	.main-navigation > div > ul li ul:hover,
-	.main-navigation > div > ul li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
-	}
-	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {
@@ -3237,21 +3224,21 @@ table th,
 @media only screen and (min-width: 782px) {
 	#masthead {
 		flex-flow: row wrap;
-		justify-content: flex-start;
+		justify-content: center;
 	}
-	#masthead .site-branding,
-	#masthead .main-navigation,
-	#masthead .social-navigation {
+	#masthead > *:nth-child(1):nth-last-child(3),
+	#masthead > *:nth-child(2):nth-last-child(2),
+	#masthead > *:nth-child(3):nth-last-child(1) {
 		margin: 0 8px;
 		width: 33.3333%;
 		width: calc(33.3333% - 16px);
 	}
+	#masthead > *:nth-child(2):nth-last-child(2) {
+		order: 1;
+	}
 	#masthead .site-branding {
 		order: 2;
 	}
-	#masthead .main-navigation {
-		order: 1;
-	}
 	#masthead .main-navigation > div > ul {
 		justify-content: flex-start;
 	}

brompton/style.css

@@ -2176,6 +2176,11 @@ table th,
 	z-index: 99999;
 }
 
+.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
+	cursor: pointer;
+	z-index: 99999;
+}
+
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2196,6 +2201,14 @@ table th,
 		display: block;
 	}
 	.main-navigation > div > ul li:hover > ul,
+	.main-navigation > div > ul li[focus-within] > ul,
+	.main-navigation > div > ul li ul:hover,
+	.main-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {
@@ -3242,21 +3255,21 @@ table th,
 @media only screen and (min-width: 782px) {
 	#masthead {
 		flex-flow: row wrap;
-		justify-content: flex-start;
+		justify-content: center;
 	}
-	#masthead .site-branding,
-	#masthead .main-navigation,
-	#masthead .social-navigation {
+	#masthead > *:nth-child(1):nth-last-child(3),
+	#masthead > *:nth-child(2):nth-last-child(2),
+	#masthead > *:nth-child(3):nth-last-child(1) {
 		margin: 0 8px;
 		width: 33.3333%;
 		width: calc(33.3333% - 16px);
 	}
+	#masthead > *:nth-child(2):nth-last-child(2) {
+		order: 1;
+	}
 	#masthead .site-branding {
 		order: 2;
 	}
-	#masthead .main-navigation {
-		order: 1;
-	}
 	#masthead .main-navigation > div > ul {
 		justify-content: flex-start;
 	}