如何让3个盒子响应手机？

Question

我有三个盒子

​

​

这就是它们在桌面上的显示方式，但我需要让它们具有响应性，当有人在智能手机上打开页面时，3个图像不能停留在一条水平线上，而是垂直。这是HTML

<div class="gallery-140721">
            <div class="gallery-card-140721">
                <a href="" target="_blank"></a><img
                        src="galeria-hotsite-modelo-molas-vl-1.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS ENSACADAS|</p>
                <p class="gallery-text-140721">Cama Box Herval Lofty</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-2.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS MAXSPRING|</p>
                <p class="gallery-text-140721">Cama Box Herval Irland</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-3.jpg" alt="modelo 1" /></a>
                <p class="gallery-title-140721">|Molas Bonnel|</p>
                <p class="gallery-text-140721">Cama Box Herval Troya</p>
            </div>
        </div>

我对所有这些都是新手，如果这是一个非常愚蠢的问题，很抱歉……

Answer 1

声明这些元素的显示类型flex，然后使用flex-direction: column添加媒体查询，这与使用display: grid可以完成相同的操作

Answer 2

您可以添加媒体查询。它将在较小的分辨率上附加样式。例如，像这样的东西可以帮助你。

  @media only screen and (max-width: 700px) {
      .gallery-card-140721 {
        width: 100%;
      }
    }

以下是有关媒体查询https://www.w3schools.com/css/css_rwd_mediaqueries.asp的详细信息