Add support for horizontal card

Created by: m5seppal

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.