Merge pull request #16640 from open-craft/clemente/responsive-about-page

Make the "about course" page adapt to small screens

lms/static/sass/multicourse/_course_about.scss

@@ -1,6 +1,11 @@
 .course-info {
   .container {
     padding-bottom: 120px;
+
+    @include media-breakpoint-down(md) {
+      min-width: auto;
+      padding: $baseline;
+    }
   }
 
   header.course-profile {
@@ -26,7 +31,11 @@
 
       margin: 0 auto;
       max-width: map-get($container-max-widths, xl);
-      min-width: 760px;
+
+      @include media-breakpoint-up(md) {
+          min-width: map-get($container-max-widths, md);
+      }
+
       position: relative;
       z-index: 2;
 
@@ -291,10 +300,13 @@
   }
 
   .details {
-    @include float(left);
-    @include margin-right(flex-gutter());
+    @include media-breakpoint-up(md) {
+      @include float(left);
+      @include margin-right(flex-gutter());
+
+      width: flex-grid(8);
+    }
 
-    width: flex-grid(8);
     font: normal 1em/1.6em $serif;
 
     h2 {
@@ -383,10 +395,12 @@
   }
 
   .course-sidebar {
-    @include box-sizing(border-box);
-    @include float(left);
+    @include media-breakpoint-up(dm) {
+      @include box-sizing(border-box);
+      @include float(left);
 
-    width: flex-grid(4);
+      width: flex-grid(4);
+    }
 
     > section {
       box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);