css: switch sidebar layout from float to flexbox.

app/javascript/src/styles/common/main_layout.scss

@@ -6,9 +6,6 @@ div#page {
   padding: 0 10px;
 
   aside#sidebar {
-    width: 15em;
-    float: left;
-
     h1 {
       font-size: $h3_size;
     }
@@ -24,8 +21,6 @@ div#page {
 
   section#content {
     overflow: visible;
-    margin-left: 15em;
-    padding-left: 1em;
   }
 }
 
@@ -41,3 +36,23 @@ footer#page-footer {
 div.clearfix {
   clear: both;
 }
+
+.sidebar-container {
+  display: flex;
+
+  #sidebar {
+    flex-basis: 15em;
+  }
+
+  #content {
+    flex: 1;
+    padding-left: 1em;
+  }
+
+  @media (max-width: 660px) {
+    flex-direction: column;
+
+    #content { order: 1; }
+    #sidebar { order: 2; }
+  }
+}

app/javascript/src/styles/specific/z_responsive.scss

@@ -45,15 +45,10 @@
     padding: 0 0.25vw;
     > div /* div#c-$controller */ {
       > div /* div#a-$action */ {
-        display: flex;
-        flex-direction: column;
 
         /* Move #sidebar below #content. */
         > aside#sidebar {
           font-size: 1.5em;
-          float: none;
-          width: auto;
-          order: 2;
         }
       }
     }

app/views/layouts/sidebar.html.erb

@@ -1,6 +1,6 @@
 <% content_for(:layout) do %>
   <div id="c-<%= params[:controller].parameterize.dasherize %>">
-    <div id="a-<%= params[:action].parameterize.dasherize %>">
+    <div id="a-<%= params[:action].parameterize.dasherize %>" class="sidebar-container">
       <aside id="sidebar">
         <%= yield :sidebar %>
       </aside>