Refactor layout of marked answers section for improved responsiveness; update column classes for better display on various screen sizes.

anatomy/templates/anatomy/partials/mark2_question_marked_fragment.html

@@ -2,8 +2,13 @@
 <div class="card mt-2">
   <div class="card-body">
     <h6 class="card-title">All stored answers for this question</h6>
+    <style>
+      /* Allow stored answers to wrap long lines and break words so they are visible
+         in narrow columns. Also ensure the lists stack on small screens. */
+      .card .list-group-item pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
+    </style>
     <div class="row">
-      <div class="col-md-4">
+      <div class="col-12 col-lg-4">
         <h6>2 marks</h6>
         <ul class="list-group mb-2">
           {% for answer in correct_answers %}
@@ -13,7 +18,7 @@
           {% endfor %}
         </ul>
       </div>
-      <div class="col-md-4">
+  <div class="col-12 col-lg-4">
         <h6>1 mark</h6>
         <ul class="list-group mb-2">
           {% for answer in half_mark_answers %}
@@ -23,7 +28,7 @@
           {% endfor %}
         </ul>
       </div>
-      <div class="col-md-4">
+  <div class="col-12 col-lg-4">
         <h6>0 marks</h6>
         <ul class="list-group mb-2">
           {% for answer in incorrect_answers %}