masha_bunny
@masha_bunny

Как перестроить блок?

Десктоп

5ed2e31cc2103502051401.jpeg

Мобильная версия

5ed2e4315bb38744171833.jpeg
  • Вопрос задан
  • 555 просмотров
Решения вопроса 2
@Olegarh1a
https://jsfiddle.net/Olegarh1a/qx75cpb8/

у меня получилось на flex сделать только так. хотелось бы узнать ваше мнение ?
Ответ написан
@Mummers
5ed34c4ae7dee208945873.png5ed34c52305db299374781.png
<style>

.color_red{background-color:red;}
.color_green{background-color:green;}
.color_blue{background-color:blue;}




section{margin:300px;width:300px; height:300px;}

.grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);}
.grid>div{width:100%;min-height:5vh}

.color_red{grid-column:1/2; grid-row:1/2;}/*Обычное положение*/
.color_green{grid-column:1/2; grid-row:2/3;}
.color_blue{grid-column:2/5; grid-row:1/3;}

@media only screen and (max-width : 768px){/*Когда телефон блоки меняют положение*/
.color_red{grid-column:1/2; grid-row:1/2;}
.color_green{grid-column:2/3; grid-row:1/2;}
.color_blue{grid-column:1/3; grid-row:2/3;}
}
</style>
<section>
    <div class="grid">
        <div class="color_red"></div>
        <div class="color_green"></div>
        <div class="color_blue"></div>
    </div>
</section>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@historydev
Острая аллергия на анимешников
.myblock {

   display: flex;
   justify-content: space-around;
   align-items: flex-start;
   flex-wrap: wrap;

}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 мар. 2024, в 11:54
3000 руб./за проект
19 мар. 2024, в 11:52
3000 руб./за проект
19 мар. 2024, в 11:49
10000 руб./за проект