A Pen by Raphael Adrien.

DkFdy.markdown

DkFdy

A Pen by Raphael Adrien on CodePen.

License.

index.html

<div class="container">
   <div class="row">
     <div class="col phone-full tablet-1-5">
       <img src="http://placehold.it/500x300" alt="Um gato" />
       Coluna 1
     </div>
     <div class="col phone-1-2 tablet-2-5">
       Coluna 1
     </div>
     <div class="col phone-1-2 tablet-2-5">
       Coluna 3
     </div>
  </div>
</div>  

Responsive-Less.markdown

Responsive Less

A Pen by Raphael Adrien on CodePen.

License.

style.less

@pad: 20px;

//Mixing
.clearfix(){
  &:after {
    content: "";
    display: table;
    clear: both;
  }  
}

*, *:after, *:before {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%; //relativo ao pai
  height: auto; //evita distorção
}

.container {
  width: 90%;
  background: pink;
  margin: 0 auto;
  .clearfix();
}

.row{
  margin-left: -@pad;
  clear: both;
  .clearfix();
}

//Todo elemento que ganha float se transforma em block
.col {
  float: left;
  padding: 0;
  position: relative;
  background-clip: padding-box !important;
  border: 0 solid transparent;
  border-left-width: @pad;
  border-bottom-width: @pad;
  background: red;
}



@media screen and (max-width : 767px) {
  .phone-1-2 {
    width: 50%;  
  }

  .phone-2-2, .phone-full {
    width: 100%;  
  }  
}

@media screen and(min-width :768px) {
  .tablet-1-5 {
    width: 20%;  
  }

  .tablet-2-5 {
    width: 40%; 
  }

  .tablet-3-5 {
     width: 60%; 
  }

  .tablet-4-5 {
    width: 80%;  
  }

  .tablet-5-5,
  .tablet-full {
    width: 100%;
  }
}