When using flex 1, flex wrap is not working?

<div class="main-content">
    <div class="content" id="first" >
        <div class="first-photo">
            <img src="jpg">
        </div>
        <div class="content-description">
            <h2>Mobilus baras</h2>
            <p class="about-service">
               Some text
            </p>
            <h3>Į pasirodymą įeina:</h3>
            <a href="/Projektas/Kontaktai/Kontaktai.html">Užsakyti</a>
        </div>
    </div>
    <div class="content" id="second">
        <div class="content-description">
            <h2>Šompano piramidės</h2>
            <p class="about-service">
                Some text
            </p>
            <h3>Į pasirodymą įeina:</h3>  
            <a href="/Projektas/Kontaktai/Kontaktai.html">Užsakyti</a>
        <div class="second-photo">
            <img src="jpg... " >
        </div>

On media. I need to wrap #first and #second div and the will be witdh 100%. That div .first-photo with img. Have to be above the text (.content-description) . And the .second div with img. Have to be the same with .content-desciprtion. When i remove flex 2 from .content-description its working. But when i adding its not.

    .main-content {
     display: flex;
     flex-direction: column;
      }
     .content {
      display: flex;
     margin:50px;
     padding:5px;
       box-shadow: -30px 30px 20px rgba(, 0, 0, 0.2);
      }
     .second-photo {
      flex:2 ;
      }
   .first-photo{
     flex:2;
     }
     .content-description {
      word-wrap: break-word;
     text-align: center;
     background-color:#3e444a;
      width: 40%;
     font-size: 17px;
      padding:20px 20px 10px 20px;
     flex:2;
 @media screen and (max-width: 1200px){

#second {
    margin-left: 0;
    flex-wrap: wrap-reverse;
}

}
#first {
    margin-left: 0;
    flex-wrap:wrap;

.content {
    width: 100%;
    justify-content: center;
    flex-wrap:wrap;