Mikhail Derkach

1. PageSpeed - не серебряная пуля. Это, в первую очередь, синтетика.
2. В отладчике включите троттлинг и смотрите, как ведут себя шрифты, если у вас нет текста - font-display попросту не работает
3. Убедитесь, что у вас сброшен кеш (как серверный, так и локальный) прежде чем тестировать
4. Вам не нужно использовать PageSpeed, у вас в Хроме уже есть LightHouse, к которому PageSpeed обращается. Так сказать, внешняя реализация того, что встроено уже в хром (не к вашему локальному, если что)
5. Возможно, у Вас недостаточно запасных шрифтов для отработки свапа. У вас идет обращение к локальным шрифтам, которых модет не быть. Я бы свапал на Roboto/Arial/serif/sans-serif.
6. Убедитесь, что у вас правильно написан фоллбек в src, включая отсылку на локальные шрифты

Смотрим can i use по флексбокс и гридам и видим, что флекс > грид. Бутстрап 4 на флексах + набор инструментов и компонентов - не делаем себе голову и в течение 2х-3х часов со знанием флексов начинаем работать на бутстрапе.

У меня всё

Мне обычно хватало размещения штатными средствами флексбокса. Но, если уж сильно хочется, то и флексы можно двигать

отладчик в хроме + responsinator.com

вам бы верстку поправить, у меня на 1360*768 в шапка и сайдбарах каша непонятная
да и слайдер slick я бы порекомендовал использовать, он адаптивен и прост

для яблочных девайсов используй responsinator.com и аналоги
скроллы появляются (я так понял) из-за того, что у тебя меню в высоту экрана не вписывается
скроллбары можно скрыть в css

html5.by/blog/flexbox - тут подробное описание, и уделено внимание flex-wrap, как написано выше

Использую flex во всех свои проектах.
Просто как-то раз попробовал сверстать шапку сайта и тут понеслось.
Значительно увеличилась производительность, очень помогает при адаптивной верстке.
Например, шапка сайта с 2 или 3 элеметами
На разрешении примерно ниже 768 уже в строку не помещается - достаточно поменять flex-direction на column - шапка будет в столбик, все довольны.
То же самое и с выравниванием по осям.
Намного удобнее менять элементы местами во флексе: достаточно написать order дочерним элементам - все поменялось.

Возможно, так же легко манипулировать float, недолго я им пользовался и не знаю всей специфики, но флексбокс реально облегчает верстку многократно

htmlbook.ru/css/nth-child - первая ссылка в гугле, все доступно написано. И даже счетчики приведены