CSS - 2 divs one below another on mobile-CodePudding

I am trying to position 2 divs one below another when the browser's width is resized for mobile? Note that one div is with two input fields in it

  <div class="newsletter">
       <div class="news-img"></div>
          <div class="news-content">
        <div class="news-text">         
             <h4>Bla bla</h4>
        </div>

    <div class="form-wrap">
      <input type="email" name="EMAIL" placeholder="Email" required="">
      <input type="submit" value="Submit">
    </div>

   </div>
 </div>

I was trying to solve it using:

@media only screen and (max-width: 600px) {
  .news-content {
    flex-direction: column;
    width: auto;
  }
}

And testing with some other properties but no luck.

https://codepen.io/filipDevelop/pen/zYzagBP

Can someone help with this?

CodePudding user response：

Declare the parent position : relative then the div as position:absolute , use the z-index to take the div above or below .

@media only screen and (max-width: 600px) {
    .newsletter {
      position: relative;
    }
    //upper div
    .news-content {
      position: absolute;
      width: auto;
      top: 0;
      left: 0;
      z-index: 2;
    }
    // lower div
    .another-div{
      position: absolute;
      width: auto;
      z-index: 1;
      top: 0;
      left: 0;
    }
  }

CodePudding user response：

If i understand you correctly:

.news-content {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  padding: 30px 35px;
  text-align: left;
  color: black;
  text-align: left;
}

.form-wrap {
  display: inline-flex;
}

.form-wrap input[type=email] {
  width: 70%;
  margin: 0;
}

.form-wrap input[type=submit] {
  background-color: #bd9b84;
  width: auto;
  padding: 13px 21px 13px 24px;
  margin-left: 5px;
}

.form-wrap input[type=submit]:hover {
  background-color: #bd9b90;
}
@media only screen and (max-width: 600px) {
  .news-content {
    grid-template-columns: 1fr;
    width: auto;
  }
  .form-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }
  .form-wrap input[type=submit] {
    margin-left: 0;
  }
  .form-wrap input[type=email] {
    padding: 1em 0;
  }
}

<div class="newsletter">
  <div class="news-img"></div>
    <div class="news-content">
      <div class="news-text">         
        <h4>Bla bla</h4>
      </div>
      <div class="form-wrap">
        <input type="email" name="EMAIL" placeholder="Email" required="">
        <input type="submit" value="Submit">
      </div>
  </div>
</div>