Grid card example tweaks (#29409)

Stack in cards in one column when < md

diff --git a/site/docs/4.3/components/card.md b/site/docs/4.3/components/card.md
index 3e2e12db5f52aee415f4dc2d3ef559c5b5f2c3d4..59e962e49b5be67141adce0c0c52db39d861d76a 100644 (file)
--- a/site/docs/4.3/components/card.md
+++ b/site/docs/4.3/components/card.md
@@ -623,10 +623,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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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.
 
 {% capture 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">
       {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
@@ -670,7 +670,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{ site.baseurl }}/d
 Change it to `.row-cols-3` and you'll see the fourth card wrap.
 
 {% capture 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">
       {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
@@ -714,7 +714,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.
 
 {% capture 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">
       {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}