移动端display:flex下flex:0 1 33.333%失效问题求助

我需要实现指定的block__item布局，现有对应HTML和CSS代码，期望是三列响应式布局，在不同屏幕尺寸下自动适配。要求解决问题时不得修改媒体查询内的代码。

我自己猜测，把.block__column的flex: 0 1 33.333%;改成flex:1 0 33.33%;能不能解决移动端布局失效的问题？恳请帮忙解答！

现有CSS代码 #

*{
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    min-height: auto;
    background-color: red;
    flex-direction: column;
}
        
.container {
    max-width: 1200px;
    margin: auto;
    background-color: green;
    padding: 0 15px;
}

@media (max-width: 1200px) {
    .container{
        width: 970px;
    }
}
@media (max-width: 992px) {
    .container{
        width: 750px;
    }
}
@media (max-width: 767px) {
    .container{
        width: none;
    }
}

.block {
    margin: 0 0 30px 0;
}

.block__row {
    display: flex;
    margin: 0 -15px;
}
.block__column {
    flex: 0 1 33.333%;
    padding: 0 15px;
} 

.block__item {
    background-color: aqua;
    padding: 15px;
}
.block__img {
    background-color: yellow;
    padding: 0 0 60% 0;
    margin-bottom: 10px;
}

.block__txt {
    font-size: 24px;
    text-align: center;
    margin: 15px 15px;
}

对应HTML代码 #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="block">
                <div class="block__row">
                    <div class="block__column">
                        <div class="block__item">
                            <div class="block__img"></div>
                            <div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div class="block__column">
                        <div class="block__item">
                            <div class="block__img"></div>
                            <div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div class="block__column">
                        <div class="block__item">
                            <div class="block__img"></div>
                            <div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者Azizxon Zufarov