Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.

{% capture example %}

<div class="card mb-3" style="max-width: 540px;">

<div class="row no-gutters">

<div class="col-md-4">

{% include icons/placeholder.svg width="100%" height="250" class="" text="Image" %}

</div>

<div class="col-md-8">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<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>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

</div>

</div>

</div>

{% endcapture %}

{% include example.html content=example %}