Fix #17511 by adding mention to the docs for how to extend the card columns

diff --git a/docs/components/card.md b/docs/components/card.md
index 86c555abb35f1498d97f2cd074435caaf900eae0..992f4a138ece069c77ddf00d84c9a91bf8ab3ad1 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -508,7 +508,7 @@ Only applies to small devices and above.
 
 ## Columns
 
-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`. 
+Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
 
 Only applies to small devices and above.
 
@@ -576,3 +576,16 @@ Only applies to small devices and above.
   </div>
 </div>
 {% endexample %}
+
+Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
+
+{% highlight scss %}
+.card-columns {
+  @include media-breakpoint-only(lg) {
+    column-count: 4;
+  }
+  @include media-breakpoint-only(xl) {
+    column-count: 5;
+  }
+}
+{% endhighlight %}