Bootstrap Card to new line responsive

Question

I'm currently working on a website for a friend and I'm using Bootstrap 4 alpha.

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:

I don't want to use column but i want to use Bootstrap Cards

Example:

Normal Screen

+++ CARD 1 +++ +++ CARD 2 +++ +++ CARD 3 +++

Mobile screen

+++ CARD 1 +++

+++ CARD 2 +++

+++ CARD 3 +++

the website is: http://www.smitefr.mmo-stream.net/index.php

Example of code:

<div class="row">
            <div class="card">
            <img src="images/dieux/Agni.jpg" alt="Card image cap">
            <h1> Agni</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div><div class="card">
            <img src="images/dieux/AhMuzenCab.jpg" alt="Card image cap">
            <h1> Ah Muzen Cab</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div><div class="card">
            <img src="images/dieux/AhPuch.jpg" alt="Card image cap">
            <h1> Ah Puch</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
</div>

Example of css:

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
}

.card > img {
    margin-bottom: .75rem;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.card-text {
    font-size: 85%;
}

you can use bootstrap grid .col-md-3 and col-sx-12 for mobile — lalit bhakuni, Apr 21 '17 at 09:11

Praveen Kumar Purushothaman · Accepted Answer · 2017-04-21T09:22:02.540

You can do something like this:

<!-- Columns start at full width on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">One</div>
    <div class="col-sm col-xs-12">Two</div>
    <div class="col-sm col-xs-12">Three</div>
  </div>
</div>

Updated with the cards:

<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=Agni.jpg" alt="Card image cap" />
        <h1> Agni</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhMuzenCab.jpg" alt="Card image cap" />
        <h1> Ah Muzen Cab</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhPuch.jpg" alt="Card image cap" />
        <h1> Ah Puch</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Snippet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=Agni.jpg" alt="Card image cap" />
        <h1> Agni</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhMuzenCab.jpg" alt="Card image cap" />
        <h1> Ah Muzen Cab</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhPuch.jpg" alt="Card image cap" />
        <h1> Ah Puch</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

See the responsive demo of above code in JSBin.

Preview

Desktop View

Mobile View

The thing is i wanted to use the [bootstrap cards](https://v4-alpha.getbootstrap.com/components/card/) since they are very practical to display data — Mederic, Apr 21 '17 at 09:12
@Mederic See the responsive demo of above code in [**JSBin**](http://output.jsbin.com/nobagowedi). You can use any kind of content inside it. — Praveen Kumar Purushothaman, Apr 21 '17 at 09:13
I updated on the website but my cards get completely reduced cant even see the image anymore. — Mederic, Apr 21 '17 at 09:18
@Mederic Let me check. I just checked. Can you use `col-sm-4` instead of `col-sm`? — Praveen Kumar Purushothaman, Apr 21 '17 at 09:18
Looks nearly perfect but could you help me figure one thing out. On the website if i go near aphrodite at one point while i slowly resize to lower i get 3 column very small and the
[goes out of the card](https://image.noelshack.com/fichiers/2017/16/1492766819-resize.png) — Mederic, Apr 21 '17 at 09:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142265/discussion-between-praveen-kumar-and-mederic). — Praveen Kumar Purushothaman, Apr 21 '17 at 09:28
@Mederic You need to do it for `-sm-` class then... Instead of using `col-sm-4 col-xs-12`, try `col-md-4 col-sm-12` — Praveen Kumar Purushothaman, Apr 21 '17 at 09:29
That works fine thanks a lot for the quick answer. If you have anymore suggestions don't hesitate. — Mederic, Apr 21 '17 at 09:33