dom1n1k

Отдельные иконки лучше. И без извращений со шрифтами.

Я тоже сразу узнал PT Sans. А скругления уже доморощенные.

Без живого кода гадать бесполезно, но в качестве гипотезы - flexbox используется? Все префиксы для него прописаны? Телефон случайно не Андроид 4.x (там флексбокс не поддерживается по нормальному)?

Есть ощущение, что в данной ситуации на верстальщика перекладывают часть проблем дизайнера.
Если поведение блоков на большом разрешение не продумано и не определено (если не отдельными макетами, то хотя бы словесным описанием) - чего бы им не расползаться?
Под дизайнером я тут понимаю не обязательно отдельное физлицо, а роль в процессе разработки (иногда дизайнер и верстальщик объединены в одном лице).

Можно и не картинкой, но картинкой проще и надежнее.

Если картинки должны сжиматься, подстраиваясь под ширину/высоту, то придется сделать 2 вложенных контейнера (чтобы в каждом применить background-size: cover)
Если же достаточно, чтобы большие картинки (заведомо больше любого экрана) сходились в центре, а по бокам просто обрезались - можно и просто через множественный background все сделать.
В целом не вижу тут каких-то особых трудностей.

Да, фактически это узаконенный хак.
Изначально их придумали для задач типа нумерации заголовков, а сегодня уже как только не используют.

Ну заменить ul/li на div-ы и всего делов. В чем проблема-то?

Вообще всё неправильно сверстано. Странно скорее, что оно работает нормально в FF, чем то, что оно глючит в Chrome. По мне, оно не должно работать нигде.

Почему все блоки .flexColumnBlock имеют height: 100%? Высота там нужна только для самого внешнего контейнера. Дальше про width и height нужно забыть и пользоваться только flex-basis, flex-grow, flex-shrink.

В чем вообще смысл использования флекса при таком подходе, ну кроме того, что это модное словечко? Зачем там 2 попеременно показываемых сайдбара вместо манипуляций со свойством order? Если уже переходить на flex-верстку, то нужно принимать и использовать её идеологию, а не усердно грести против течения. Мне кажется, вы её (идеологию) пока не понимаете - почитайте теорию. Либо используйте абсолютное позиционирование, оно проще (я серьезно).

Сверстать таблицей, как обычно.
А на маленьких экранах делать ячейки display: block плюс float: left. Для первой ячейки потом указать width: 100%, у остальных по 25%.
Разумеется, нужно подправить display у тегов tr, tbody и так далее.
Как вариант, можно превращать каждую строку во флекс-бокс, но какого-то особого профита от него я тут не вижу.

Линейный градиент под нужным углом и с нулевой шириной перехода.
Примерно так:

background: linear-gradient(280deg, white 0%, white 50%, silver 50%, silver 100%);

"Отфильтровать" бэкграунд, не трогая содержимое дива? Никак, насколько я знаю.
Только если сделать фоновую картинку и контент отдельными вложенными элементами, а потом фон засунуть под низ при помощи z-index.

От БЭМа это не зависит, это определяется логикой макета.
Один враппер - если есть 100% уверенности, что все блоки будут одной ширины.
А то очень часто бывает, что почти все на (условно говоря) 1000px, но 1 или 2 - на всю ширину экрана (например, какой-нибудь верхний тулбар над шапкой, с социалочками).
Ещё бывает, что где-то в середине блок текста, который сам по себе обычной ширины, но под него подложен фон шириной 100%.

Если цвет и картинка указаны вместе (в одном фоне), то картинка идет всегда сверху, цвет снизу.
Нужно использовать множественный фон. В данном случае просто поставить после цвета запятую.

Первая запись имеет смысл, если наряду с ней есть ещё и стили для принтера

@media print {
    ...
}

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