Skrolea

А просто
flex-flow: row wrap не подойдет?

https://jsfiddle.net/8a4j8crf/1/

div.product:hover {
    border: 1px solid #59c7fb;
}
div.product {
    border: 1px solid #e1e1e1;
}

Когда смотрите какой то код с помощью хрома, в нем есть фильтр по возможным состояниям блока :hov

А если

.wrapper:after {
    padding-top: 100%; 
}

?

https://codepen.io/dudleystorey/pen/knqyK
Гуглите full background video
В целом это всего навсего

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

Точно подключился font-awesome.min.css?

А режим эмуляции в Хроме совсем не подходит?
https://developers.google.com/web/tools/chrome-dev...

Легко) Только писать нужно) Пишите тесты, оцениваете сколько стоило написание тестов, запускаете тесты - профит ))

Wrapbootstrap.com

Э-э-э, а у него что, центральный блок фиксирован?

affix
Так?

https://m.habrahabr.ru/company/netcracker/blog/277433/

https://validator.w3.org

codepen.io/helmemat/pen/ndJgz

fadein?

Типа так Jsfiddle

Ну так вам не скажут. Давайте код. Может вы просто не пишете
@media all and (min-width: 737px) {} )