How do I reposition my div element to the bottom of image using media query-CodePudding

How do I reposition my text to the bottom of the image after using media query?

main img {
  width: 100%;
  height: 100%;
}

div {
  background-color: red;
  display: flex;
  flex-direction: column;
}

<main>
  <img src="https://dummyimage.com/800x400/000/fff">
  <div>
    <h1>
      Learn something new everyday
    </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button>Start Here</button>
  </div>
</main>

CodePudding user response：

You mean reposition like this? at what viewport? heres a sample

main img {
  width: 100%;
  height: 100%;
}

div {
  background-color: red;
  display: flex;
  flex-direction: column;
}


@media only screen and (max-width:1024px){
div {
  background-color: red;
  display: flex;
  flex-direction: column-reverse;
  text-align:center;
}
}

<main>
  <img src="https://dummyimage.com/800x400/000/fff">
  <div>
    <h1>
      Learn something new everyday RESIZE ME
    </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button>Start Here</button>
  </div>
</main>