dom1n1k

Нельзя так делать. Можно наоборот - a внутри td.

Без живого кода гадать бесполезно, но в качестве гипотезы - 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%);

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

Тоже сталкивался с подобной проблемой и тоже с flex-боксом. На десктопных браузерах всё ок, на мобильных появлялся зазор 1px. Долго ковырялся с ним и так и не победил. Пока забил, благо, критично верстку он не портит у меня.

Если продал один раз и под покровом ночи - ну и фиг с ним.
А если торговать постоянно - это, по всей видимости, нужно делать в каком-то публичном маркете?

Либо картинки, либо вставлять дивы-разделители шириной 1px, и уже их заливать градиентом.

Я делаю так:

<li class="active">Главная</li>
<li><a href="/products/">Продукты</a></li>
...

Просто, понятно и эффективно.

Иногда внутрь добавляется ещё один span или div — если нужна дополнительная технологическая обертка для каких-то визуальных эффектов. Но это лишь при необходимости, в общем случае без.

Хотя с другой стороны… Честно говоря, я не вижу никакой катастрофы, когда активная ссылка меню ведет на ту же самую страницу. Ну ведет — и что? Это чисто маньяческие придирки, в реальных проектах нередко используются гораздо более «грязные» вещи.