Adjust order of elements on small screens

We're changing the order of the elements in the HTML so the menu button
appears next to the menu it opens, with no logo between them, which IMHO
makes sense and makes it easier to understand the layout for people
using screen readers.

A small advantage of this approach is that on very narrow screens or
Consul applications having a very long word for "Menu", the menu button
appeared on top, the logo appeared below it, and the contents of the
menu appeared below the logo. Now the logo appears on top, the menu
button appears below it, and the contents of the menu appear below the
menu button.

app/assets/stylesheets/layout.scss

@@ -572,8 +572,8 @@ body > header,
   display: flex;
 
   @include breakpoint(small only) {
+    flex-direction: row-reverse;
     flex-wrap: wrap;
-    justify-content: space-between;
 
     .responsive-menu {
       width: 100%;
@@ -582,15 +582,14 @@ body > header,
         display: inline-block;
       }
     }
+
+    [data-responsive-toggle] {
+      flex-grow: 1000;
+    }
   }
 
-  @include breakpoint(medium) {
   h1 {
     flex-grow: 1;
-    }
-  }
-
-  h1 {
     margin-bottom: 0;
 
     a img {

app/views/layouts/_header.html.erb

@@ -11,6 +11,12 @@
   </div>
 
   <div class="top-bar">
+    <h1>
+      <%= link_to root_path, accesskey: "0" do %>
+        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
+      <% end %>
+    </h1>
+
     <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
       <button type="button" class="menu-button" data-toggle>
         <span class="menu-icon"></span>
@@ -18,12 +24,6 @@
       </button>
     </span>
 
-    <h1>
-      <%= link_to root_path, accesskey: "0" do %>
-        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
-      <% end %>
-    </h1>
-
     <div id="responsive-menu" class="responsive-menu">
       <%= render Layout::AccountMenuComponent.new(current_user) %>