Sass Responsive Cards

_cards.scss

/**
 * - num columns per card
 * - num possible column
 * - include @cards > * > * as a flex item
 */
@mixin cards($card-columns: 4, $possible-columns: 12, $flex: true){
  
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  > * {
    float: left;
    width: percentage($card-columns / $possible-columns);

    @if $flex == true {
      > * {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
      }
    }
  } 

}

_example.scss

.card-list {
  @media (min-width: 768px){
    @include cards(3);
  }
  @media (min-width: 400px) and (max-width: 768px){
    @include cards(4);
  }

  .card-list-container {
    height: 100%;
    position: relative;

    .card-list-body {
      -webkit-box-flex: 1;
      -webkit-flex:     1 1 auto;
      -ms-flex:         1 1 auto;
      flex:             1 1 auto;
      padding: 1.25rem;
    }
  }
}

usage.html

<ul class='card-list'>
  <!-- foreach -->
	<li>
    <div class='card-list-container'>
      <img alt="alt" src="..."/>
      <div class='card-list-body'>
        <p>
          body content
        </p>
      </div>
      <div>
        footer content
      </div>
    </div>
  </li>
	<!-- endforeach -->
</ul>