如何使用媒体查询将 div 元素重新定位到图像底部

Question

如何在使用媒体查询后将文本重新定位到图像底部？

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>

Answer 1

你的意思是像这样重新定位？在什么视口？这是一个示例

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>

如何使用媒体查询将 div 元素重新定位到图像底部

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

html

css

media