title: Bootstrap 4 card-deck with number of columns based on viewport
body: <p>I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.</p>
  
  <p>The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply <a href="http://www.codeply.com/render/KrUO8QpyXP" rel="noreferrer">here</a>.</p>
  
  <p>This doesn't make sense to me since, I would assume, that you'd want a minimum size for your card to shrink to in order for your content to still look good.</p>
  
  <p>I then tried adding in some viewport classes to break on screen sizes, but as soon as that div gets added, the card-deck doesn't apply anymore, thus not making the cards equal height.</p>
  
  <p>How can I get this accomplished? Is this a missing feature that will be addressed in the full release of Bootstrap 4?</p>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/crrm5q9m/" rel="noreferrer">https://jsfiddle.net/crrm5q9m/</a></p>
  
  <pre><code>&lt;div class="card-deck-wrapper"&gt;
    &lt;div class="card-deck"&gt;
      &lt;div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.&lt;/p&gt;
            &lt;footer&gt;Makes flexible layouts &lt;cite title="Source Title"&gt;Faster&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".&lt;/p&gt;
            &lt;footer&gt;All of this makes more &lt;cite title="Source Title"&gt;Sense&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;There are also some interesting new text classes for uppercase and capitalize.&lt;/p&gt;
            &lt;footer&gt;These handy utilities make it &lt;cite title="Source Title"&gt;Easy&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.&lt;/p&gt;
            &lt;footer&gt;The Glyphicons are not &lt;cite title="Source Title"&gt;Included&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.&lt;/p&gt;
            &lt;footer&gt;Makes flexible layouts &lt;cite title="Source Title"&gt;Faster&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".&lt;/p&gt;
            &lt;footer&gt;All of this makes more &lt;cite title="Source Title"&gt;Sense&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;There are also some interesting new text classes for uppercase and capitalize.&lt;/p&gt;
            &lt;footer&gt;These handy utilities make it &lt;cite title="Source Title"&gt;Easy&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"&gt;
        &lt;div class="card-block"&gt;
          &lt;blockquote class="card-blockquote"&gt;
            &lt;p&gt;If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.&lt;/p&gt;
            &lt;footer&gt;The Glyphicons are not &lt;cite title="Source Title"&gt;Included&lt;/cite&gt;&lt;/footer&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>