Вы видимо немного не поняли.
Количество колонок меняется с помощью медиа квери. На враппер вешается @include container() на дочерний блок @include span(12), media screen and (max-width: 768px) @include span(10) media screen and (max-width: 414px) @include span(3)
Такая логика, надеюсь понятно будет
thead tfoot
Код стайл поправить местами (где-то есть пробелы после селектора перед фигурными скобками, где-то нету)
Можешь переписать с помощью шаблонизаторов и препроцессоров + методологии, то если совсем глубоко вникать
Один вопрос, зачем такое делать?
Если одну и туже графику для мониторов с ретиной и без делать, на ретине будет значительная потеря качества. Следовательно для ретины нужно другая графика, с большим разрешением. И заюзать retina js дабы подсовывало нужные имейджы на ретине.