Improve responsiveness of Features examples

site/content/docs/5.0/examples/features/index.html

@@ -65,10 +65,10 @@
   </symbol>
 </svg>
 
-<div class="container py-5" id="featured-3">
+<div class="container px-4 py-5" id="featured-3">
   <h2 class="pb-2 border-bottom">Columns with icons</h2>
-  <div class="row g-5 py-5">
-    <div class="feature col-md-4">
+  <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+    <div class="feature col">
       <div class="feature-icon bg-primary bg-gradient">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
       </div>
@@ -79,7 +79,7 @@ <h2>Featured title</h2>
         <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
       </a>
     </div>
-    <div class="feature col-md-4">
+    <div class="feature col">
       <div class="feature-icon bg-primary bg-gradient">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
       </div>
@@ -90,7 +90,7 @@ <h2>Featured title</h2>
         <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
       </a>
     </div>
-    <div class="feature col-md-4">
+    <div class="feature col">
       <div class="feature-icon bg-primary bg-gradient">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
       </div>
@@ -106,10 +106,10 @@ <h2>Featured title</h2>
 
 <div class="b-example-divider"></div>
 
-<div class="container py-5" id="hanging-icons">
+<div class="container px-4 py-5" id="hanging-icons">
   <h2 class="pb-2 border-bottom">Hanging icons</h2>
-  <div class="row g-5 py-5">
-    <div class="col-md-4 d-flex align-items-start">
+  <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+    <div class="col d-flex align-items-start">
       <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
       </div>
@@ -121,7 +121,7 @@ <h2>Featured title</h2>
         </a>
       </div>
     </div>
-    <div class="col-md-4 d-flex align-items-start">
+    <div class="col d-flex align-items-start">
       <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
       </div>
@@ -133,7 +133,7 @@ <h2>Featured title</h2>
         </a>
       </div>
     </div>
-    <div class="col-md-4 d-flex align-items-start">
+    <div class="col d-flex align-items-start">
       <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
         <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
       </div>
@@ -150,10 +150,10 @@ <h2>Featured title</h2>
 
 <div class="b-example-divider"></div>
 
-<div class="container py-5" id="custom-cards">
+<div class="container px-4 py-5" id="custom-cards">
   <h2 class="pb-2 border-bottom">Custom cards</h2>
 
-  <div class="row row-cols-3 align-items-stretch py-5">
+  <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
     <div class="col">
       <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
         <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
@@ -221,10 +221,10 @@ <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs h
 
 <div class="b-example-divider"></div>
 
-<div class="container py-5" id="icon-grid">
+<div class="container px-4 py-5" id="icon-grid">
   <h2 class="pb-2 border-bottom">Icon grid</h2>
 
-  <div class="row row-cols-4 g-4 py-5">
+  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
     <div class="col d-flex align-items-start">
       <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
       <div>