Колонка Flex Direction не работает на мобильных телефонах?

Question

Недавно я столкнулся с проблемой с flexbox. У меня был гибкий контейнер с множеством гибких предметов внутри, настроенный на обертывание. Предметы также были гибкими контейнерами, учитывая, что треть от родительского элемента при больших экранах размером до половины на планшетах и ​​100% на мобильных дисплеях. Вы, вероятно, можете представить, как колонны рушатся в вашей голове. Он работал великолепно, пока я не проверил свой телефон и не увидел, что элементы вообще не отображаются на мобильном телефоне.

Я огляделся и увидел, что иногда в ios гибкая обертка ведет себя странно, поэтому я установил для параметра flex wrap значение none и столбец flex-direction на мобильном телефоне, но он по-прежнему не отображал изображения. Мое решение закончилось тем, что я переключил отображаемые элементы flex: блокировка на мобильном устройстве, так как мне больше не нужны были функции flex. Это заставило предметы появляться снова.

Кто-нибудь еще сталкивался с этим? Если да, знаете ли вы, почему это произошло и каково было ваше решение? Ниже приведен пример кода для моего готового кода (он в sass). Стоит отметить, что это гибкий контейнер внутри гибкого контейнера.

.listing {
            display: flex;
            flex-basis: calc(33.3% - 1.5rem);
            margin-right: 0;
            margin-bottom: 5rem;
            margin-right: .75rem;
            margin-left: .75rem;

            @media screen and (max-width: 768px) {
                margin-right: .75rem !important;
                flex-basis: calc(50% - 1.5rem);
            }

            @media screen and (max-width: 991px) {
                flex-basis: calc(50% - 1.5rem);
            }

            @media screen and (max-width: 560px) {
                display: block;
                flex-basis: calc(100%);
            }
        }