stack column in smaller screens

app/views/root/show.html.erb

@@ -4,25 +4,22 @@
 </div>
 
 <div class="container">
-  <div class="row row-cols-2">
-    <div class="col">
+  <div class="row">
+    <div class="col-md">
       <h5 class="border-bottom pb-2">Passport York</h5>
       <p class="text-muted">
         Current York University students, faculty, and staff will normally have a Passport York account and a library card (in the form of a YU-card for students and some employee groups) through which they will be authenticated as authorized York University users.
       </p>
+      <p class="text-center">
+        <a href="<%= ppy_login_path %>" class="btn btn-primary">Login with Passport York</a>
+      </p>
     </div>
-    <div class="col">
+    <div class="col-md">
       <h5 class="border-bottom pb-2">Library Barcode and Password</h5>
       <p class="text-muted">
         Other members of the York University community who do not have a Passport York account will need to authenticate using the barcode number on their library card and password.
       </p>
-    </div>
-    <div class="col">
-      <p class="text-center">
-        <a href="<%= ppy_login_path %>" class="btn btn-primary">Login with Passport York</a>
-      </p>
-    </div>
-    <div class="col">
+      <br>
       <p class="text-center">
         <a href="<%= new_user_session_path %>" class="btn btn-secondary">Login with Library Barcode</a>
       </p>