title: Bootstrap Card to new line responsive
body: <p>I'm currently working on a website for a friend and I'm using Bootstrap 4 alpha.</p>
  
  <p>Using the Cards i have three cards shown on the page and I would like that when the screen becomes mobile size to change to one card per line:</p>
  
  <p>I don't want to use column but i want to use <a href="https://v4-alpha.getbootstrap.com/components/card/" rel="nofollow noreferrer">Bootstrap Cards</a></p>
  
  <p>Example:</p>
  
  <ul>
  <li><p>Normal Screen</p>
  
  <pre><code>+++ CARD 1 +++ +++ CARD 2 +++ +++ CARD 3 +++
  </code></pre></li>
  <li><p>Mobile screen</p>
  
  <pre><code>+++ CARD 1 +++
  
  +++ CARD 2 +++
  
  +++ CARD 3 +++
  </code></pre></li>
  </ul>
  
  <p>the website is: <a href="http://www.smitefr.mmo-stream.net/index.php" rel="nofollow noreferrer">http://www.smitefr.mmo-stream.net/index.php</a></p>
  
  <p>Example of code:</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;div class="card"&gt;
              &lt;img src="images/dieux/Agni.jpg" alt="Card image cap"&gt;
              &lt;h1&gt; Agni&lt;/h1&gt;
              &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
          &lt;/div&gt;&lt;div class="card"&gt;
              &lt;img src="images/dieux/AhMuzenCab.jpg" alt="Card image cap"&gt;
              &lt;h1&gt; Ah Muzen Cab&lt;/h1&gt;
              &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
          &lt;/div&gt;&lt;div class="card"&gt;
              &lt;img src="images/dieux/AhPuch.jpg" alt="Card image cap"&gt;
              &lt;h1&gt; Ah Puch&lt;/h1&gt;
              &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example of css:</p>
  
  <pre><code>.card {
      float: left;
      width: 33.333%;
      padding: .75rem;
      margin-bottom: 2rem;
      border: 0;
  }
  
  .card &gt; img {
      margin-bottom: .75rem;
      display: block;
      width: 80%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
  }
  
  .card-text {
      font-size: 85%;
  }
  </code></pre>