Fix the responsiveness of the learner detail page

analytics_dashboard/static/apps/learners/detail/templates/learner-detail.underscore

 <section class="learner-summary-container">
     <div class="row">
-        <div class="col col-3 md-col-3 learner-names" />
+        <div class="col col-12 sm-col-12 md-col-3 learner-names" />
         <% _.each(['learner-enrollment', 'learner-cohort', 'learner-accessed'], function(learnerClass) { %>
-            <div class="col col-3 md-col-3 <%- learnerClass %>"></div>
+            <div class="col col-12 sm-col-12 md-col-3 <%- learnerClass %>"></div>
         <% }); %>
     </div>
 </section>

analytics_dashboard/static/sass/_developer.scss

@@ -942,6 +942,10 @@ table.dataTable thead th.sorting_desc:after {
     color: $edx-gray-d2;
   }
 
+  .col {
+    margin-bottom: $padding-large-vertical;
+  }
+
 }
 
 // Fix the pattern library border styling