Fixes #17486: start work on responsive cards for decks, groups, and columns

docs/components/card.md

@@ -112,7 +112,7 @@ Using the grid:
 Using custom widths:
 
 {% example html %}
-<div class="card card-block" style="width: 20rem;">
+<div class="card card-block" style="width: 18rem;">
   <h3 class="card-title">Special title treatment</h3>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -295,6 +295,8 @@ Cards include their own variant classes for quickly changing the `background-col
 
 Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
 
+Only applies to small devices and above.
+
 {% example html %}
 <div class="card-group">
   <div class="card">
@@ -328,6 +330,8 @@ Use card groups to render cards as a single, attached element with equal width a
 
 Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
 
+Only applies to small devices and above.
+
 **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
 
 {% example html %}
@@ -363,7 +367,7 @@ Need a set of equal width and height cards that aren't attached to one another?
 
 ## Columns
 
-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`.
+Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
 
 **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
 

scss/_card.scss

@@ -181,33 +181,37 @@
 //
 
 @if $enable-flex {
-  .card-deck {
+  @include media-breakpoint-up(sm) {
-    display: flex;
+    .card-deck {
-    flex-flow: row wrap;
+      display: flex;
-    margin-right: -.625rem;
+      flex-flow: row wrap;
-    margin-left: -.625rem;
+      margin-right: -.625rem;
+      margin-left: -.625rem;
 
-    .card {
+      .card {
-      flex: 1 0 0;
+        flex: 1 0 0;
-      margin-right: .625rem;
+        margin-right: .625rem;
-      margin-left: .625rem;
+        margin-left: .625rem;
+      }
     }
   }
 } @else {
-  .card-deck {
+  @include media-breakpoint-up(sm) {
-    display: table;
+    .card-deck {
-    table-layout: fixed;
+      display: table;
-    border-spacing: 1.25rem 0;
+      table-layout: fixed;
+      border-spacing: 1.25rem 0;
 
-    .card {
+      .card {
-      display: table-cell;
+        display: table-cell;
-      width: 1%;
+        width: 1%;
-      vertical-align: top;
+        vertical-align: top;
+      }
+    }
+    .card-deck-wrapper {
+      margin-right: -1.25rem;
+      margin-left: -1.25rem;
     }
-  }
-  .card-deck-wrapper {
-    margin-right: -1.25rem;
-    margin-left: -1.25rem;
   }
 }
 
@@ -215,54 +219,56 @@
 // Card groups
 //
 
-.card-group {
+@include media-breakpoint-up(sm) {
-  @if $enable-flex {
+  .card-group {
-    display: flex;
-    flex-flow: row wrap;
-  } @else {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  .card {
     @if $enable-flex {
-      flex: 1 0 0;
+      display: flex;
+      flex-flow: row wrap;
     } @else {
-      display: table-cell;
+      display: table;
-      vertical-align: top;
+      width: 100%;
+      table-layout: fixed;
     }
 
-    + .card {
+    .card {
-      margin-left: 0;
+      @if $enable-flex {
-      border-left: 0;
+        flex: 1 0 0;
-    }
+      } @else {
-
+        display: table-cell;
-    // Handle rounded corners
+        vertical-align: top;
-    @if $enable-rounded {
-      &:first-child {
-        .card-img-top {
-          border-top-right-radius: 0;
-        }
-        .card-img-bottom {
-          border-bottom-right-radius: 0;
-        }
-      }
-      &:last-child {
-        .card-img-top {
-          border-top-left-radius: 0;
-        }
-        .card-img-bottom {
-          border-bottom-left-radius: 0;
-        }
       }
 
-      &:not(:first-child):not(:last-child) {
+      + .card {
-        border-radius: 0;
+        margin-left: 0;
+        border-left: 0;
+      }
 
-        .card-img-top,
+      // Handle rounded corners
-        .card-img-bottom {
+      @if $enable-rounded {
+        &:first-child {
+          .card-img-top {
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom {
+            border-bottom-right-radius: 0;
+          }
+        }
+        &:last-child {
+          .card-img-top {
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &:not(:first-child):not(:last-child) {
           border-radius: 0;
+
+          .card-img-top,
+          .card-img-bottom {
+            border-radius: 0;
+          }
         }
       }
     }
@@ -274,12 +280,14 @@
 // Card
 //
 
-.card-columns {
+@include media-breakpoint-up(sm) {
-  column-count: 3;
+  .card-columns {
-  column-gap: 1.25rem;
+    column-count: 3;
+    column-gap: 1.25rem;
 
-  .card {
+    .card {
-    display: inline-block;
+      display: inline-block;
-    width: 100%; // Don't let them exceed the column width
+      width: 100%; // Don't let them exceed the column width
+    }
   }
 }