当我更改 window 大小时更改 img 位置

Question

我正在尝试在 css / html 中创建一个网站。

我的部分有一张图片，旁边有文字。当 window 尺寸小于 1300 像素时，我想将图片放在文字上方。

我试过 width/display/flex 但没用。有什么想法吗？

HTML 部分：

<section class="who" id="who">
  <div class="max-width">
    <h2 class="title"> Qui suis-je ? </h2>
    <div class="who-content">
      <div class="column left">
        <img src="Profil1.jpeg" alt="">
      </div>
      <div class="column right">
        <div class="text">
          <p>Lorem</p>
          <a href="#"><i class="fa-solid fa-file-code">   C.V   </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS 部分：

@media(max-width:1300px){
  .max-width{
    margin-left: 0px;
    max-width: 800px;
  }
  .who .who-content .left img{
    height: 350px;
    width: 350px;
  }
  .who .who-content .column{
    width: 100%;
  }
        
  .who .who-content .left{
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
  }
  .who .who-content .right{
    flex:100%;
  }
}

Answer 1

试试这个：

/*here goes the code for when its above 1300px*/


@media screen and (max-width: 1300px) {
    /*here goes the code for when its under 1300 pixels*/
}

Answer 2

在 CSS 中使用 flex，您可以在媒体查询中将 flex-flow 设置为 column，以便文本按预期位于图像下方。但是您想在父元素上设置 display: flex 和 flex-flow: column 属性，例如我在下面的代码中使用的 section 标记：

.who-content {
  display: flex;
}

@media(max-width:1300px) {
  .max-width {
    margin-left: 0px;
    max-width: 800px;
  }
  .who-content {
    flex-flow: column;
  }
  .who .who-content .left img {
    height: 350px;
    width: 350px;
  }
  .who .who-content .column {
    width: 100%;
  }
  .who .who-content .left {
    justify-content: center;
    margin: 0 auto 60px;
  }
  .who .who-content .right {
    flex: 100%;
  }
}

<section class="who">
  <div class="max-width">
    <h2 class="title"> Qui suis-je ? </h2>
    <div class="who-content">
      <div class="column left">
        <img src="Profil1.jpeg" alt="">
      </div>
      <div class="column right">
        <div class="text">
          <p>Lorem </p>
          <a href="#"><i class="fa-solid fa-file-code">   C.V    </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

当我更改 window 大小时更改 img 位置

Change img position when I change window size

html

css

image