<div class="flexrow row-1-el">
  <div class="element">
    one element per row
  </div>
</div>
<div class="flexrow row-1-el sm-row-2-el md-row-3-el">
  <div class="element">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa possimus in debitis itaque temporibus similique delectus explicabo consequuntur omnis voluptates, perspiciatis at sequi cumque exercitationem nam blanditiis deserunt aspernatur ut!
  </div>
  <div class="element">
    3 elements (on md), 2 elements (on sm) and 1 element (less than sm)
  </div>
  <div class="element">
    on this row
  </div>
</div>
<div class="flexrow row-7-el">
  <div class="element">
    two elements row
  </div>
  <div class="element">
    <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6WfwDujm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/jRjGeyQ.jpg" class="responsive-image">
  </div>
  <div class="element">Ditox</div>
  <div class="element">is</div>
  <div class="element">the</div>
  <div class="element">best</div>
  <div class="element">dogo</div>
</div>

$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1600px;

// Global
* { box-sizing: border-box; }

// Row like element
.flexrow { 
  display: flex; 
  flex-flow: row wrap;
}
/* 
  Column like elements
  (elements inside the row) 
*/
.element { 
  padding: 15px;
  word-wrap: break-word; 
}

/*
 precalculated layout classes generation
*/
@mixin row-elements($from: 1, $to: 11){
  @for $i from $from to $to {
    .flexrow.row-#{$i}-el > .element { 
      flex: 0 1 calc(100%/#{$i}); 
    }
    @media(min-width: $screen-xs) {
     flexrow.xs-row-#{$i}-el > div.element { 
        flex: 0 1 calc(100%/#{$i}); 
      } 
    }
    @media(min-width: $screen-sm) {
      .flexrow.sm-row-#{$i}-el > div.element { 
        flex: 0 1 calc(100%/#{$i}); 
      } 
    }
    @media(min-width: $screen-md) {
      .flexrow.md-row-#{$i}-el > div.element { 
        flex: 0 1 calc(100%/#{$i}); 
      } 
    }
    @media(min-width: $screen-lg) {
      .flexrow.lg-row-#{$i}-el > div.element { 
        flex: 0 1 calc(100%/#{$i}); 
      } 
    }
    @media(min-width: $screen-xl) {
      .flexrow.xl-row-#{$i}-el > div.element { 
        flex: 0 1 calc(100%/#{$i}); 
      } 
    }
  }
}

@include row-elements(1, 13);

.responsive-image {
  width: 100%;
  height: auto;
}

/*  DEBUG  */
div {
  outline: 1px auto limegreen;
}