.col{
  @media only screen and (min-width: 960px){
    width:25%;
    float:left;
  }

  @media only screen and (min-width: 720px) and (max-width: 959px){
    width:50%;
    float:left;
  }
}

@media only screen and (min-width: 960px) {
  .col {
    width: 25%;
    float: left; } }

@media only screen and (min-width: 720px) and (max-width: 959px) {
  .col {
    width: 50%;
    float: left; } }

@mixin large-screen($min, $max){
  @media only screen and (min-width: $min) and (max-width: $max){
    float:left;
    @content;
  }
}

@import "partial/_minixs";

.col{
  @include large-screen(960px,1600px){
    width:25%;
  }
  @include large-screen(720px,960px){
    width:50%;
  }
}

@media only screen and (min-width: 960px) and (max-width: 1600px) {
  .col {
    float: left;
    width: 25%; } }

@media only screen and (min-width: 720px) and (max-width: 960px) {
  .col {
    float: left;
    width: 50%; } }