Мобильная версия совместно с display: flex?

Question

[Marizza40]

Добрый день! Подскажите пожалуйста, использую «display: flex» для блоков. Но в мобильной версии блок заезжает на другой, а необходимо, чтобы блоки вставали как при «flex-direction: column». Через media не воспринимает почему-то. Я начинающий, поэтому напишите пожалуйста понятнее. Заранее спасибо за ответы.

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

Comments

[Анита Ковалева]

Какие именно блоки заезжают друг на друга? Иконки с преимуществами? Скриншот можно?

[Marizza40]

Анита Ковалева, заезжает так

Хотелось бы видеть так:

Answer 1

[Анита Ковалева]

Попробуйте сбросить кэш браузера, у вас всё написано правильно, но когда вы используете укороченное flex-flow: wrap - лучше тогда писать flex-flow: column wrap;.

Comments

[Marizza40]

Спасибо за ответ. с использованием "flex-flow: column wrap;" - он встает как мне надо, в вертикаль, но так же он остается и в обычной версии. А в обычной версии мне необходимо в горизонт.

[Анита Ковалева]

Marizza40,

На 900px и ниже он у вас будет перестравиваться в column, 900 можете заменить на любое нужное вам разрешение.

[Marizza40]

Анита Ковалева, У меня немного не обычная платформа битрикс 24. Через него делаем половину сайта программируя, половину блоками которые уже сделаны (может это поможет). И там как не странно не работает @_media вообще не как. Почему не знаю.

[Анита Ковалева]

Marizza40, Медиа пишется без нижнего подчеркивания - @media (max-width: 600px)
Бывает так, что во время проектирования сайта - не соблюдена каскадность и вы банально не можете переопределить стили вашей CMS. В этом случае - после нужных вам правил напишите:

@media (max-width: 600px) {
   .class {
      flex-flow: column wrap <b>!important</b>
   }
}

!important - костыль который помогает сломать вашу "неправильную" каскадность стилей и принудительно задать свойство для элемента

[Marizza40]

Анита Ковалева, к сожалению не в какую