Bootstrap/flexbox card: move image to left/right side on desktop

Update: Bootstrap officially supports horizontal cards nowadays

I created a feature request for this back in time: https://github.com/twbs/bootstrap/issues/20794. Nowadays Bootstrap has horizontal cards supported and documented.

Bootstrap implementation is based on a combination of grid and utility classes:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </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>

The solution is effectively pretty much the same as I used. You still might need to do minor tweaks to make it work as you wish, also stated in the documentation: "Further adjustments may be needed depending on your card content".

Original answer

I figured out one way to do this, using background-size: cover. I had to use div instead of img but otherwise this solution works and in my case img is not so necessary. Other solutions are still welcome.

I modified my html a little:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

For card-img-bottom, I set style:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

And in the desktop view, I change the height to 100% so the height is always the same than the height of card-block.

There is still some extra padding between card-block and card-img-bottom in the desktop view because of Bootstrap default paddings. For that reason, the white area is slightly bigger than the image. For me, it's not an issue so I didn't remove them.