Как вы строите адаптированый grid?
Использую сетку Bootstrap, но классы бутстрапа присваиваю не в html, а в scss через extend, придерживаясь БЭМ. Изобретать велосипед смысла не вижу. Bootstrap-сетка на сегодняшний день лучшая..about{
  &__item{
    @extend .col-md-3;  
    @extend .col-sm-2;  
    @extend .col-xs-6;  
  }
}
Я пользовался первым вариантом делая так: вначале отступы, потом экраны начиная с маленького, т.е.<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 1<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 2<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 3<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 4<</div>
  </div>
</div>
Но Serj-One в этом плане делает более правильно и не засоряет html (сам когда писал не маленький проект поплатился за использования сетки прямо в html). Так что почитайте как использовать bootstrap grid + sass(препроцессор css) и очистите ваш html!
На офф сайте в доках к альфе 4 версии bootstrap есть пример v4-alpha.getbootstrap.com/layout/grid