MDL-57585 block_myoverview: grid adjustments and responsive layout

This is for the course info on the 'Courses' view.

Part of MDL-55611 epic.

blocks/myoverview/templates/courses-view-course-item.mustache

@@ -28,26 +28,32 @@
         "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
     }
 }}
-<div class="list-group-item col-md-4 m-b-1">
-    <div class="d-inline-block">
-        <div class="d-inline-block m-x-1">
-            <div class="course-info-container" id="course-info-container-{{id}}">
-                <div class="row m-b-1">
-                    <div class="col-md-6">
-                        {{> block_myoverview/progress-chart}}
+<div class="col-lg-6 col-xl-4">
+    <div class="card m-b-1">
+        <div class="card-block course-info-container" id="course-info-container-{{id}}">
+            <div class="hidden-sm-up">
+                {{> block_myoverview/progress-chart}}
+                <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
+            </div>
+            <div class="hidden-xs-down">
+                <div class="media">
+                    <div class="media-left">
+                        <div class="media-object">
+                            {{> block_myoverview/progress-chart}}
+                        </div>
                     </div>
-                    <div class="col-md-6">
-                        <h3 class="align-text-bottom"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h3>
+                    <div class="media-body">
+                        <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
                     </div>
                 </div>
-                <div class="row text-muted m-b-1">
-                    {{#userdate}}{{startdate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}} -
-                    {{#userdate}}{{enddate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}}
-                </div>
-                <div class="row text-muted">
-                    {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
-                </div>
             </div>
+            <p class="text-muted">
+                {{#userdate}}{{startdate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}} -
+                {{#userdate}}{{enddate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}}
+            </p>
+            <p class="text-muted">
+                {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
+            </p>
         </div>
     </div>
 </div>