I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs.
JSFIDDLE: demo
Here is how it should appear in desktop view:
https://i.sstatic.net/ugAXd.png
And here is the expected appearance on smaller devices:
https://i.sstatic.net/Xxw75.png
I've attempted to find a solution, but so far I haven't achieved the desired outcome.
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;
}
}
The maximum width of the website should be 1240px;
What adjustments do I need to make to achieve the desired result? Any assistance or recommendations would be highly appreciated.