Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
  <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Longer Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
      <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v)
// ----

@import "breakpoint";
$medium: 600px;
$large: 1000px;
$extralarge: 1200px;

section {
  display: flex;
  flex-flow: row wrap;
  
  & > div {
    text-align: center;
    flex: 0 0 100%;
    
    @include breakpoint($medium) {
      flex: 0 0 33.333%;
      width: 33.333%;
      float: left;
    }
    
    @include breakpoint($large) {
      flex: 0 0 25%;
      width: 25%;
    }
    
    @include breakpoint($extralarge) {
      flex: 0 0 16.666%;
    }
    
    &:hover {
      background-color: salmon;
    }
  }
}


 // generic stuff
body {
  font-family: Georgia;
}

SassMeister-output.css

section {
  display: flex;
  flex-flow: row wrap;
}
section > div {
  text-align: center;
  flex: 0 0 100%;
}
@media (min-width: 600px) {
  section > div {
    flex: 0 0 33.333%;
    width: 33.333%;
    float: left;
  }
}
@media (min-width: 1000px) {
  section > div {
    flex: 0 0 25%;
    width: 25%;
  }
}
@media (min-width: 1200px) {
  section > div {
    flex: 0 0 16.666%;
  }
}
section > div:hover {
  background-color: salmon;
}

body {
  font-family: Georgia;
}

SassMeister-rendered.html

<section>
  <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Longer Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
    <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
      <div>
    <img src="http://placehold.it/200x255"/>
     <h2>Text here</h2>
   </div>
</section>