Mobile version with display: flex?

Question

css

Good afternoon! Please tell me, I use "display: flex" for blocks. But in the mobile version, the block runs over another, and it is necessary that the blocks stand up as with “flex-direction: column”. For some reason, it does not perceive through media . I am a beginner, so please write more clearly. Thanks in advance for your replies.

<div class="proect">
   <div class="container">
       
  <div class="proect_realizm">
     <div class="proect_inner">
         <div class="proect_img">
            <img src="https://i.ibb.co/1z69xk8/54684.jpg" class="proect_img_img">
         </div><!--/.proect_img-->
         <div class="proect_txt">
            <span class="proect_txt_h1">Долгодеревенское</span>
             <div class="text_proect">
            <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
            </div><!--/.text_proect--> 
             <div class="icon_proect">
             <div class="proect_icon">
                <img src="https://i.ibb.co/4dkGjxK/calendar.png" class="proect_img_icon">
                 <p class="proect_text">
                     Разработка проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/k6TrM6C/icons8-engineer-80.png" class="proect_img_icon">
                 <p class="proect_text">
                     Задействованны на реализацию проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/GxKLfN5/icons8-brief-64.png" class="proect_img_icon_с1">
                 <p class="proect_text">
                     Реализация проекта с "нуля"
                 </p>
             </div><!--/.proect_icon-->
                 </div><!--/.icon_proect-->
             </div><!--/.proect_txt-->
     </div><!--/.proect_inner-->  
     <div class="proect_inner">
         <div class="proect_img">
            <img src="https://i.ibb.co/1z69xk8/54684.jpg" class="proect_img_img">
         </div><!--/.proect_img-->
         <div class="proect_txt">
            <span class="proect_txt_h1">Долгодеревенское</span>
             <div class="text_proect">
            <p class="proect_txt_txt">
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             </div><!--/.text_proect--> 
             <div class="icon_proect">
             <div class="proect_icon">
                <img src="https://i.ibb.co/4dkGjxK/calendar.png" class="proect_img_icon">
                 <p class="proect_text">
                     Разработка проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/k6TrM6C/icons8-engineer-80.png" class="proect_img_icon">
                 <p class="proect_text">
                     Задействованны на реализацию проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/GxKLfN5/icons8-brief-64.png" class="proect_img_icon_с1">
                 <p class="proect_text">
                     Реализация проекта с "нуля"
                 </p>
             </div><!--/.proect_icon-->
                 </div><!--/.icon_proect-->
             </div><!--/.proect_txt-->
     </div><!--/.proect_inner--> 
    </div><!--/.proect_realizm--> 
       
</div><!--/.container-->            
</div><!--/.proect-->

/*proect*/

.proect_realizm {
    display: flex;
    flex-flow: wrap;
}

.proect_inner{
    display: flex;
    padding-top: 25px;
    width: 50%;
    padding-bottom: 25px;
    padding-right: 15px;
}

.proect_img_img{
    width: 180px;
}
.proect_txt_h1{
    padding: 5px;
}
.proect_txt{
    padding: 0 20px 20px 20px;
    display: table;
}
.proect_txt_h1{
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
    padding: 5px 0;
    color: #0092db;
}
.text_proect{
    width: 100%;
}
.proect_txt_txt{
    padding: 10px 0;
    font-size: 14px;
    text-align: left;
    color: #000;
    font-family:Roboto;
    line-height: 1.5;
    width: 100%;
}
.icon_proect{
    display: flex;
    width: 100%;
}
.proect_icon{
    width: 40%;
    text-align: center;
}
.proect_img_icon_с1{
    width: 100px;
    padding-bottom: 8px;
}
.proect_img_icon{
    width: 70px;
    padding-bottom: 12px;
}
.proect_text{
    font-size: 12px;
    color: #000;
    font-family: Roboto;
    line-height: 1.5;
}

Answer 1

Try resetting the browser cache, everything is written correctly, but when you use a shortened flex-flow: wrapone, it's better to write flex-flow: column wrap;.