Merge pull request #58 from EbookFoundation/book-breakpoint

use not grid layout for mobile or unsupported devices

static/scss/bookview.scss

@@ -1,14 +1,9 @@
 @import 'foundation';
 
-@include breakpoint (small down) {
+@mixin mobile() {
     .wrapper {
-        display: grid;
-        grid-template-columns: fit-content 1fr 20%;
-        grid-template-rows: auto auto;
-        grid-template-areas: "bookImage       bookImage       bookImage"
-                             "bookSidebar     bookSidebar     bookSidebar"
-                             "bookDescription bookDescription bookDescription"
-                             "bookComments    bookComments    bookComments";
+        display: flex;
+        flex-direction: column;
     }
 
     .pubinfo {
@@ -22,11 +17,13 @@
     }
 
     .bookImage {
+        order: 0;
         display: flex;
         justify-content: center;
     }
 
     .bookSidebar {
+        order: 1;
         flex-direction: row;
         flex-wrap: wrap;
     }
@@ -47,11 +44,26 @@
         flex: 100%;
     }
 
+    .bookDescription {
+        order: 2;
+    }
+
     .bookComments {
+        order: 3;
         margin-top: 15px;
     }
 }
 
+@include breakpoint (small down) {
+    @include mobile();
+}
+
+
+@supports not (grid-template-rows: auto) {
+    @include mobile();
+}
+
+@supports (grid-template-rows: auto) {
     @include breakpoint (medium) {
         .wrapper {
             display: grid;
@@ -72,6 +84,7 @@
             flex-direction: column;
         }
     }
+}
 
 .bookImage {
     grid-area: bookImage;