Complete mobile reactiveness in CSS layer

src/client/site/item_page/recipe_detail/recipe_detail.scss

@@ -8,7 +8,7 @@
 .view__recipe_detail {
     display : flex;
 
-    .input, .output{
+    .input, .output {
         flex : 0 1 33%;
 
         h3 {
@@ -20,8 +20,13 @@
         }
     }
 
+    .input {
+        order: 10;
+    }
+
     .pattern {
         flex : 0 1 33%;
+        order: 20;
 
         display        : flex;
         flex-direction : column;
@@ -36,9 +41,48 @@
         }
     }
 
+    .output {
+        order: 30;
+    }
+
     &:not(:first-child) {
         border-top  : 1px solid $color-gray-light;
         margin-top  : $size-margin-medium;
         padding-top : $size-margin-large;
     }
 }
+
+@include screen-size(mobile) {
+    .view__recipe_detail {
+        flex-direction: column;
+
+        > :not(:last-child) {
+            margin-bottom: $size-margin-large;
+        }
+
+        .input, .output {
+            flex: 0 0 auto;
+
+
+            h3 {
+            }
+
+            .view__inventory {
+            }
+        }
+
+        .input {
+            order: 21;
+        }
+
+        .pattern {
+            flex: 0 0 auto;
+
+            .tool {
+            }
+        }
+
+        &:not(:first-child) {
+        }
+    }
+}