HTML & CSS Creating responsive form with display: flex?

[Vogtei]

Hey guys,

I just want to create a 2-column form but unfortunately it doesn't wrap among each other at the pixel width I set for mobile.
This is my code:

<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>

.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%;
  }
}

It basically looks like this on the desktop:

On mobile, the right column should wrap unter the left.

Maybe some of you are having some ideas how to solve this.

Big thank you!!
Leon

 

[BGB]

Try to add this -

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

 

[Vogtei]

Try to add this -

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

First of all thank you for your help!

I created an @media with

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

but boxes are now on every size among themselves. I tried then flex-direction:row without @media to get the boxes back besides on desktop size, but unfortunately it doesnt work :/

 

[BGB]

Paste your website address here.