Добрый день.
Столкнулся также с неправильным отображением flex-box в Safari (точнее на устройстве IPAD Mini)
Консоль разработчика в Сhrome отображает все ровно, там как раз есть эмуляция данного девайса. На самом устройстве всё едет.
Прописал
display: -webkit-box;
-webkit-align-items: center;
-webkit-justify-content: space-between;
Это почему-то стало конфликтовать, и в Chrome и других браузерах опять все едет. Удаляю display: -webkit-box; - все в Chrome становится в порядке. Но Safari в таком виде все равно не работает.
Комментарии типа обнови Safari не принимаются.
Такими техниками как Grunt и Autoprefixer не пользуюсь - они действительно способны решить мою проблему?.. Просто на изучение потребуется время.... Может есть более быстрое решение?..

шаблон демо предлагает немного другой вариант

@media (min-width: 1200px)

#content .col-lg-2:nth-child(6n+1), #content .col-lg-3:nth-child(4n+1), #content .col-lg-4:nth-child(3n+1), #content .col-lg-6:nth-child(2n+1) {
    clear: left;
}

@media (max-width: 991px) and (min-width: 768px)

#content .col-sm-2:nth-child(6n+1), #content .col-sm-3:nth-child(4n+1), #content .col-sm-4:nth-child(3n+1), #content .col-sm-6:nth-child(2n+1) {
    clear: left;
}

Я неодумеваю почему это не вшито в дистрибутив...

Я как -то пытался такое провернуть. Выходит нечитаемая каша. Согласен с Алексеем Николаевым.