<div class="grid">
  <div class="grid__cell">A</div>
  <div class="grid__cell">B</div>
  <div class="grid__cell">C</div>
  <div class="grid__cell">D</div>
  <div class="grid__cell">E</div>
</div>

$screen-sm-min: 768px;
$screen-sm-max: 991px;
$screen-md-min: 992px;
$pad: 10px;

/* layout styles */
.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: $pad / 2;
}
.grid__cell {
  $cols: 1;
  width: calc(#{100% / $cols} - #{$pad});
  max-width: calc(#{100% / $cols} - #{$pad});
  margin: $pad / 2;
  flex: 1 1 auto;
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .grid__cell {
    $cols: 2;
    width: calc(#{100% / $cols} - #{$pad});
    max-width: calc(#{100% / $cols} - #{$pad});
  }
}

@media (min-width: $screen-md-min) {
  .grid__cell {
    $cols: 3;
    width: calc(#{100% / $cols} - #{$pad});
    max-width: calc(#{100% / $cols} - #{$pad});
  }
}


/* presentational & boilerplate styles */
body, html {
  min-height: 100%;
  margin: 0;
}
.grid__cell {
  background-color: orange;
  text-align: center;
  color: white;
  font-family: arial, sans-serif;
  line-height: 60px;
}