Redo .card-deck and .card-group so they're always flex (#22860)

diff --git a/scss/_card.scss b/scss/_card.scss
index 1ab85a4ec22981c455d6bb63a0fc52c4bedca55a..b5bc26b15d9341f4ec2a9176d24bf3e23e44403f 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -130,9 +130,15 @@
 
 // Card deck
 
-@include media-breakpoint-up(sm) {
-  .card-deck {
-    display: flex;
+.card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
     margin-right: -$card-deck-margin;
     margin-left: -$card-deck-margin;
@@ -142,6 +148,7 @@
       flex: 1 0 0%;
       flex-direction: column;
       margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
       margin-left: $card-deck-margin;
     }
   }
@@ -152,15 +159,22 @@
 // Card groups
 //
 
-@include media-breakpoint-up(sm) {
-  .card-group {
-    display: flex;
+.card-group {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
 
     .card {
       flex: 1 0 0%;
 
       + .card {
+        margin-bottom: 0;
         margin-left: 0;
         border-left: 0;
       }
@@ -177,6 +191,7 @@
             border-bottom-right-radius: 0;
           }
         }
+
         &:last-child {
           @include border-left-radius(0);
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4b3299ce99e4b16b773e0789842513b236e5ed98..049956178a571094b8d2694a591053ef9db81497 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -632,7 +632,8 @@ $card-bg:                  $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-deck-margin:          ($grid-gutter-width / 2) !default;
+$card-group-margin:         ($grid-gutter-width / 2) !default;
+$card-deck-margin:          $card-group-margin !default;
 
 $card-columns-count:        3 !default;
 $card-columns-gap:          1.25rem !default;