Bootstrap recently offers a features called "Cards" everything is cool until it reaches the 747px viewport. See image below.

[![enter image description here](https://i.stack.imgur.com/y4S7P.jpg)](https://i.stack.imgur.com/y4S7P.jpg)

As you can see it all mess up, the container doesn't fit. Is there any CSS fix that we can do make sure they are looking good from 747px and below???

Here's my HTML:

```
<div class="row">
    <div class="col-md-3">
    <div class="card">
      <img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #1</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card card-inverse card-primary text-center">
      <img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #2</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card card-inverse card-success text-center">
      <img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #3</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card card-inverse card-info text-center">
      <img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #4</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

</div>

```

Check out my JSFIDDLE: <https://jsfiddle.net/a9wav5g1/1/>

Any idea??? How to fix this?