Add support for horizontal card

I think it’s very common use case that you want to have card content vertically in small screen and in bigger screens content is aligned horizontally. For example: http://www.apple.com/newsroom/

I implemented this for my own project roughly so that:

.card {    display: flex; flex-direction: column;}
.card-img {    order: -1;}
.card-block {    order: 0;}
.card-img-last {    order: 1;}

.card-img-last is basically same than .card-img-bottom, but it doesn’t care about order in source and also naming works better with horizontal cards where last refers to the right side.

Then I have horizontal classes for cards which needs to be added in addition to basic card class:

.card-horizontal {    flex-direction: row;}
.card-horizontal-sm-up { ... }
.card-horizontal-md-up { ... } etc.

.card-horizontal .card-img {    flex: 0 0 $card-img-width;}
.card-horizontal .card-block {    flex: 0 0 calc(100% - $card-img-width)}

Something like that, not a perfect example but gives the basic idea how it is working. I’m using card-block now as a flex item but it won’t work if I want to have card header or footer. There should be some wrapper div which contains all content expect image.

Only problem with this is to make image behave well in horizontal view. In my implementation .card-img is just a div container, then img is inside that and I use object-fit (IE/Edge fix with Javascript) to cover the whole div. I’ve set minimum and maximum height for .card-block to have always reasonably sized image there.

I would like to hear if this is wanted feature and then opinions what would be the correct implementation. Obviously we need to have also non-flex-box solution for that.

[mariusl-a]

Bump! This would be awesome! 💯

[justinlevi]

I’m using a version of the following:

<div class="container py-3">
    <div class="card">
      <div class="row ">
        <div class="col-md-4">
            <img src="https://placeholdit.imgix.net/~text?txtsize=38&amp;txt=400%C3%97400&amp;w=400&amp;h=400" class="w-100">
          </div>
          <div class="col-md-8 px-3">
            <div class="card-block px-3">
              <h4 class="card-title">Lorem ipsum dolor sit amet</h4>
              <p class="card-text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
              <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>

        </div>
      </div>
    </div>

source: https://bootsnipp.com/snippets/XR0Dv

Would be great if this was supported natively though