Html 具有flex内联样式的CSS图像。如何根据决议改变形式阻止？

这是怎么回事？我想用内联flex创建div，当用户更改分辨率时，这个div将显示更改为block。我尝试了很多方法，但我不知道为什么它不起作用

    <div
        style="text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 400px;">


        <div style="">
            <img style="text-align: center;" src="laptop.png">
            <p>logo</p>
        </div>

        <div style="margin-left: 120px; margin-right: 120px;">
            <img src="laptop.png">
            <p>logo</p>
        </div>

        <div style="">
            <img src="laptop.png">
            <p>logo</p>
        </div>

    </div>

标志

标志

标志

codepen.io/Remax166/pen/EXomZK

---

谢谢你的帮助：）

如果您的意思是通过显示为列来阻止，那么添加flex wrap:wrap；是的，但当分辨率更改为移动时，如何更改此设置？从内联到块？Flex工作正常，但当我更改浏览器分辨率时，其中一个块将隐藏。是否要在桌面上显示一行三个块，在mobile中显示一行一个块？如果添加我告诉您的内容，则在调整视口大小后，它将自动换行。如果您不想采用这种方法，可以使用媒体查询，并根据设备大小将其更改为块。您需要将所有内容都放在一个类中，以便以元素为目标。看这个：好的，它起作用了：）我必须学习有关媒体查询的知识并练习。谢谢你们的帮助！