diff --git a/app/static/js/volunteerDetails.js b/app/static/js/volunteerDetails.js
index 1b6192a23..e151e2a83 100644
--- a/app/static/js/volunteerDetails.js
+++ b/app/static/js/volunteerDetails.js
@@ -5,6 +5,15 @@ $(document).ready(function () {
     }).get();
 	users = new Set(users);
 	users = [... users]
+	    const columnMap = {
+        phoneSelect: 1,
+        emailSelect: 2,
+        statusSelect: 3,
+        dietRestrictionSelect: 4,
+        emergencyContactSelect: 5,
+        insuranceSelect: 6,
+    };
+
 	$("#tableCardToggle").on('click', function () {
 		$("#volunteerInformationCardToPrint").toggle()
 		$("#volunteerInformationTableToPrint_wrapper").toggle()
@@ -47,31 +56,35 @@ $(document).ready(function () {
 		});
 	}
 	function getCheckBoxes() {
-		$(".displayCheckbox").each(function () {
-			let checkboxId = this.id;
-			if ($('#' + checkboxId).is(':checked')) {
-				$("#volunteerInformationCardToPrint ." + checkboxId).show();
-			} else {
-				$("#volunteerInformationCardToPrint ." + checkboxId).hide();
-			}
-			});
-		hideDuplicateVolunteers()
-		volunteerInfoTable.page('first').draw(false);
+        $(".displayCheckbox").each(function () {
+            let checkboxId = this.id;
+            let isChecked = $(this).is(':checked');
+            if (checkboxId in columnMap) {
+                volunteerInfoTable.column(columnMap[checkboxId]).visible(isChecked);
+            }
+            if (isChecked) {
+                $("#volunteerInformationCardToPrint ." + checkboxId).show();
+            } else {
+                $("#volunteerInformationCardToPrint ." + checkboxId).hide();
+            }
+        });
+        hideDuplicateVolunteers()
+        volunteerInfoTable.page('first').draw(false);
+    }
 
-	}
-	
 	function sortVolunteers() {
-		let sortedTable = $("#volunteerInformationTableToPrint_wrapper");
-		let entriesTable = sortedTable.find(".volunteerInfoEntries");
-	
-		entriesTable.sort(function (a, b) {
-			let textA = a.getElementsByClassName('nameSelect')[0].innerText
-			let textB = b.getElementsByClassName('nameSelect')[0].innerText
-			return textA.localeCompare(textB);
-		});
-	
-		entriesCards.appendTo(sortedCards);
-	};
+        let sortedTable = $("#volunteerInformationTableToPrint_wrapper");
+        let entriesTable = sortedTable.find(".volunteerInfoEntries");
+   
+        entriesTable.sort(function (a, b) {
+            let textA = a.getElementsByClassName('nameSelect')[0].innerText
+            let textB = b.getElementsByClassName('nameSelect')[0].innerText
+            return textA.localeCompare(textB);
+        });
+        let sortedCards = $("#volunteerInformationCardToPrint .sort-here");
+        let entriesCards = sortedCards.find(".volunteerInfoEntries");
+        entriesCards.appendTo(sortedCards);
+    };
 
 	var volunteerInfoTable = $('#volunteerInformationTableToPrint').DataTable({pageLength: 10,order: [[0, 'asc']]});
 	getCheckBoxes()
diff --git a/app/templates/events/volunteerDetails.html b/app/templates/events/volunteerDetails.html
index 6464a869c..c955905e0 100644
--- a/app/templates/events/volunteerDetails.html
+++ b/app/templates/events/volunteerDetails.html
@@ -117,18 +117,18 @@ <h3 style="text-align: center; width:180%;">
         </div>
         <div class="col">
           <label><b>Included Information:</b></label><br>
-          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="dietRestrictionSelect" checked>
-          <label for="dietRestrictionSelect">Dietary Restrictions</label><br>
-          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="emergencyContactSelect" checked>
-          <label for="emergencyContactSelect">Emergency Contact</label><br>
           <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="phoneSelect" checked>
           <label for="phoneSelect">Phone Number</label><br>
-          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="statusSelect" checked>
-          <label for="statusSelect">Volunteer Status</label><br>
           <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="emailSelect" checked>
           <label for="emailSelect">Email</label><br>
+          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="statusSelect" checked>
+          <label for="statusSelect">Volunteer Status</label><br>
+          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="dietRestrictionSelect" checked>
+          <label for="dietRestrictionSelect">Dietary Restrictions</label><br>
+          <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="emergencyContactSelect" checked>
+          <label for="emergencyContactSelect">Emergency Contact</label><br>
           <input class="displayCheckbox noprint" type="checkbox" name="selected_items" id="insuranceSelect">
-          <label for="InsuranceSelect">Insurance Information</label><br>
+          <label for="insuranceSelect">Insurance Information</label><br>
           <input class="displayCheckbox noprint bNumberSelect" type="checkbox" name="selected_items" id="barcodeSelect" checked>
           <label class="bNumberSelect" for="barcodeSelect">B-Number Barcode</label><br>
         </div>
@@ -162,23 +162,24 @@ <h3 style="text-align: center; width:180%;">
         {{ printParticipants('card', attendedUser, rsvpUser, waitlistUser) }}
       </div>
     </div>
-
-    <table class="table d-print-table" id="volunteerInformationTableToPrint">
-      <thead>
-        <tr>
-          <th class="text-center">Name</th>
-          <th class="phoneSelect">Phone Number</th>
-          <th class="emailSelect">Email</th>
-          <th class="statusSelect">Volunteer Status</th>
-          <th class="dietRestrictionSelect">Dietary Restrictions</th>
-          <th class="emergencyContactSelect">Emergency Contact</th>
-          <th class="insuranceSelect">Insurance Information</th>
-        </tr>
-      </thead>
-      <tbody>
-        {{ printParticipants('table', attendedUser, rsvpUser, waitlistUser) }}
-      </tbody>
-    </table>
+    <div class="table-responsive">
+      <table class="table d-print-table w-100" id="volunteerInformationTableToPrint">
+        <thead>
+          <tr>
+            <th class="text-center">Name</th>
+            <th class="phoneSelect">Phone Number</th>
+            <th class="emailSelect">Email</th>
+            <th class="statusSelect">Volunteer Status</th>
+            <th class="dietRestrictionSelect">Dietary Restrictions</th>
+            <th class="emergencyContactSelect">Emergency Contact</th>
+            <th class="insuranceSelect">Insurance Information</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{ printParticipants('table', attendedUser, rsvpUser, waitlistUser) }}
+        </tbody>
+      </table>
+    </div>
 {% else %}
     <h3>No volunteer information available for this event.</h3>
 {% endif %}