У меня есть простой раздел, который я создаю для своего приложения, этот раздел содержит одну строку с 3 столбцами, в каждом столбце 3 деления.
JSFIDDLE: демо
Вот как это должно выглядеть на рабочем столе
Вот как это должно выглядеть в маленьком устройстве
пока вот мое решение, которое я пробовал, но не получаю то, что хочу.
HTML
</div>
<div class="col-md-2 left-top-details_second">
</div>
</div>
<div class="row subrow_bottom">
<div class="col-md-4 left-bottom">
</div>
</div>
</div>
<div class="col-md-4 middle">
<div class="row subrow">
<div class="col-md-2 left-top-details_first">
</div>
<div class="col-md-2 left-top-details_second">
</div>
</div>
<div class="row subrow_bottom">
<div class="col-md-4 left-bottom">
</div>
</div>
</div>
<div class="col-md-4 right">
<div class="row subrow">
<div class="col-md-2 left-top-details_first">
</div>
<div class="col-md-2 left-top-details_second">
</div>
</div>
<div class="row subrow_bottom">
<div class="col-md-4 left-bottom">
</div>
</div>
</div>
</div>
</div>
</section>
CSS
body{
background: red;
}
#for-her{
height: 1200px;
background: red;
overflow: hidden;
}
.col-md-4 {
height: 200px;
margin: 20px 0px;
}
.left-top-details_first{
border: 2px solid white;
height: 200px;
width: 100%;
}
.left-top-details_second{
border: 2px solid white;
height: 200px;
width: 100%;
}
.left-bottom{
border: 2px solid white;
height: 200px;
width: 100%;
}
@media (max-width: 768px){
.main-row{
display: flex;
flex-direction: column;
}
}
максимальная ширина сайта должна быть 1240 пикселей;
Что мне нужно изменить, чтобы получить то, что я хочу? любая помощь или предложения будут оценены