html - 使用 display: flex 创建响应式表单？

Question

我只想创建一个 2 列表单，但不幸的是，它不会以我为移动设备设置的像素宽度相互包裹。这是我的代码：

HTML

<div class="formular-hintergrund">
          <div class="col-row-contact">
            <div class="col-row-upside">
                <!-- content -->
              </div>
                
            <div class="col-row-downside">
              <div class="col box-left">
                <!-- content -->
              </div>
                  <div class="col box-right">
                <!-- content -->
                  </div>
             </div>
              
            </div>

CSS

.formular-hintergrund {
  width: 70%;
  height: 50%;
  margin: 0% 15%;
  background: #233DFF;
  border-radius: 20px;
  padding: 50px;

}

.box-left {
  margin-right: 15px;
  flex-direction: column;
}
.box-right {
  margin-left: 15px;
  flex-direction: column;
}

@media (max-width: 986px) {
  .formular-hintergrund {
    width: 95%;
    margin: 0% 2.5%;
    background: #233DFF;
  }
  .box-left {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .box-right {
    margin-left: 0px;
    margin-top: 15px;
  }
}

.col-row {
  width: 100%;
  display: flex;
}

.col-row-contact {
  width: 100%;
  display: block;
}

.col-row-upside {
  width: 100%;
  display: block;
}

.col-row-downside {
  width: 100%;
  display: flex;
}

.col {
  width: 100%;
}

@media (max-width: 986px) {
  .col-row {
    width: 100%;
    display: block;
  }

  .col {
    width: 100%;
  }
}

它在桌面上基本上是这样的： 桌面视图

在移动设备上，右栏应包裹在左栏下方，如下所示： mobile view

也许你们中的一些人有一些想法如何解决这个问题。

非常感谢！！莱昂

标签： htmlcssformsflexbox