html - 如何使元素在移动 View 中堆叠？

Question

我有一个小图片、一个表单输入字段和一个提交按钮。它们按我的意愿显示，并排水平显示在普通台式计算机上的站点上。

当在小屏幕上查看页面时，提交按钮下降到下面的行(好)，但图像停留在文本输入字段旁边的位置。理想情况下，我想强制这三个元素在移动 View 中相互堆叠。因此，顶部是图像(居中)，然后是文本输入字段，然后是提交按钮。

我对响应式设计只有非常基本的了解。有什么建议吗？

这是代表我的情况的代码:

.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
}
.row {
   width: 100%;
}
.flex-item {
   padding: 0;
   margin: 0;
   text-align: center;
}

<div class="flex-container">
   <div class="row">
      <span class="flex-item"><img src="https://images.unsplash.com/photo-1509718752889-8c69d2c6c11d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0b901b115b38" height="65" width="150"></span>
   </div>
   <div class="row">
      <span class="flex-item">
         <form action="find.php" method="post">
             <input type="text" name="thingy_id" placeholder="Enter Thingy ID" size="13" maxlength="15">
             <input type="submit" value="SUBMIT" class="thingyid" />
         </form>
      </span>
   </div>
</div>

Answer 1

@media (max-width: 1024px)  {
    .flex-container {
        display: block;
    }
}