<div class="flexrow">
  <div class="col-100">
    full-width element
  </div>
</div>
<div class="flexrow">
  <div class="col-15">
    <p>15% element</p>
  </div>
  <div class="col-25">
    <p>25% element</p>
  </div>
  <div class="col-60">
    <p>60% element</p>
  </div>
</div>
<div class="flexrow">
  <div class="col-10">
    <img class="responsive-image" 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="col-50">
    Sweetie dogo
  </div>
  <div class="col-40">
    <img src="https://lh3.googleusercontent.com/proxy/nDCAEl9_-u3YZGo3ny6DK3_lo9d7TezXrL-MEU-cK7EFoVcfQduIgp27Nto6dO1HwwPQ_2g8WobXKqPb8bDiXhXu88-wZJcYbryGx1B2xvMTLGybP7FTmCpXdOwJu6vBXroU0GzgCfnl_cKi6axI6V9J" class="responsive-image" alt="SsangYong Tivoli">
    <div class="flexrow">
      <div class="col-100">
        Amazing Car
      </div>
      <div class="col-50">
        Nested Row
      </div>
      <div class="col-50">
        With 2 cols
      </div>
    </div>
  </div>
</div>


<div class="flexrow">
  <div class="col-25">
    content
  </div>
  <div class="col-40">
    content
  </div>
  <div class="col-35">
    content
  </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) 
*/
[class*='col-'] { 
  padding: 15px;
  * {
    word-wrap: break-word; 
    word-break: break-all;
  }
  
}

/*
precalculated layout classes generation
*/

$from: 1;
$to: 101;

@for $i from $from to $to {
  .col-#{$i} { 
    flex: 0 1 calc(#{$i}%);
    max-width: calc(#{$i}%);
  }
  @media(min-width: $screen-xs) {
    .xs-col-#{$i} { 
      flex: 0 1 calc(#{$i}%);
      max-width: calc(#{$i}%);
    } 
  }
  @media(min-width: $screen-sm) {
    .sm-col-#{$i} { 
      flex: 0 1 calc(#{$i}%);
      max-width: calc(#{$i}%);
    } 
  }
  @media(min-width: $screen-md) {
    .md-col-#{$i} { 
      flex: 0 1 calc(#{$i}%);
      max-width: calc(#{$i}%);
    } 
  }
  @media(min-width: $screen-lg) {
    .lg-col-#{$i} { 
      flex: 0 1 calc(#{$i}%);
      max-width: calc(#{$i}%);
    } 
  }
  @media(min-width: $screen-xl) {
    .xl-col-#{$i} { 
      flex: 0 1 calc(#{$i}%);
      max-width: calc(#{$i}%);
    } 
  }
}




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

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