change img position when i change window size CSS-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.

ive tryed to play with width/ display /flex but it doesn't work. any idea ?

HTML PART :

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