Change img position when I change window size-CodePudding

I'm trying to create a website in css / html.

I've a pic in my section, and text next to it. I wanted to make my pic above the text when the window size is under 1300 px.

I've tried to play with width/display/flex but it doesn't work. Any ideas?

HTML part:

<section  id="who">
  <div >
    <h2 > Qui suis-je ? </h2>
    <div >
      <div >
        <img src="Profil1.jpeg" alt="">
      </div>
      <div >
        <div >
          <p>Lorem</p>
          <a href="#"><i >   C.V   </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

CSS part:

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

CodePudding user response：

Using flex in CSS, you can set the flex-flow to column in your media query so that the text goes below the image as intended. But you want to set the display: flex and flex-flow: column properties on a parent element, such as the section tag I used in the code below:

.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 >
  <div >
    <h2 > Qui suis-je ? </h2>
    <div >
      <div >
        <img src="Profil1.jpeg" alt="">
      </div>
      <div >
        <div >
          <p>Lorem </p>
          <a href="#"><i >   C.V    </i></a>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

try this:

/*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*/
}