Grid card example tweaks (#29409)

Stack in cards in one column when < md

diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md
index 4c953a99a386232f37119e55bf81884914f10d3b..6296c2eeb781c89fa893f1aecc38eddcbd602c06 100644 (file)
--- a/site/content/docs/4.3/components/card.md
+++ b/site/content/docs/4.3/components/card.md
@@ -603,10 +603,10 @@ Just like with card groups, card footers in decks will automatically line up.
 
 ### Grid cards
 
-Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
 
 {{< example >}}
-<div class="row row-cols-md-2">
+<div class="row row-cols-1 row-cols-md-2">
   <div class="col mb-4">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -649,7 +649,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
 Change it to `.row-cols-3` and you'll see the fourth card wrap.
 
 {{< example >}}
-<div class="row row-cols-md-3">
+<div class="row row-cols-1 row-cols-md-3">
   <div class="col mb-4">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -692,7 +692,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
 When you need equal height, add `.h-100` to the cards.
 
 {{< example >}}
-<div class="row row-cols-md-3">
+<div class="row row-cols-1 row-cols-md-3">
   <div class="col mb-4">
     <div class="card h-100">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}