Блог

Я просто хочу создать форму из 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%;
  }
}
 

В основном это выглядит так на рабочем столе:
вид рабочего стола

На мобильном устройстве правый столбец должен закрываться слева, например, так: мобильный вид

Может быть, у кого-то из вас есть какие-то идеи, как это решить.

Большое вам спасибо!! Леон