Свойство css flexbox wrap не работает на ios6

Сейчас я работаю над своим проектом, поэтому решил использовать flexbox вместо float . Он отлично работает для меня, но я обнаружил, что display:flex не работает на старом iphone (ios 6.1). Поэтому я добавил

 display: -webkit-box; 

Теперь свойство Flex работает, но все элементы расположены в ряд. Я создал простую скрипку , чтобы показать проблему. Также я сделал два скриншота, чтобы показать, как это работает на ПК и на iPhone.

ПК: введите описание изображения здесь

iPhone: введите описание изображения здесь

Как вы видите -webkit-flex-wrap: wrap не работает.

Кто-нибудь знает, как решить эту проблему? Я надеюсь на вашу помощь.

Поддержка текущей спецификации flexbox в iOS не начинается до iOS 7.0.

iOS 3.2 – 6.1 поддерживает старую спецификацию flexbox и не поддерживает упаковку .

См. Данные поддержки браузера здесь: http://caniuse.com/#search=flexbox

См. Свойство flex-direction для информации о том, как выровнять элементы flex (строка или столбец).

 .wrapper { flex-direction: column; ... } 

Кроме того, на ваших гибких элементах у вас есть ( width: 500px; ), попробуйте свойство flex :

 .wrapper > div { flex: 0 0 500px; ... }