Clever_Coyote

Вы видимо немного не поняли.
Количество колонок меняется с помощью медиа квери. На враппер вешается @include container() на дочерний блок @include span(12),
media screen and (max-width: 768px) @include span(10)
media screen and (max-width: 414px) @include span(3)
Такая логика, надеюсь понятно будет

Один вопрос, зачем такое делать?
Если одну и туже графику для мониторов с ретиной и без делать, на ретине будет значительная потеря качества. Следовательно для ретины нужно другая графика, с большим разрешением. И заюзать retina js дабы подсовывало нужные имейджы на ретине.

OS X в идеале, на Linux с фш проблемы могут быть. Лично мне приятнее Linux. Все от кейсов зависит, если просто верстаешь, винды с головой хватит.

Что-то вроде этого?
codepen.io/Affiction/pen/LNPYZK