I'm currently working on using Flex to adjust the layout of my grid when it reaches a specific breakpoint. I've included a visual example of what I want it to look like at 900px and above.
However, I'm struggling to get the columns to align properly and stack beneath each other.
Below is the code snippet and a link to a fiddle for reference: http://jsfiddle.net/3wk9yepj/
https://i.sstatic.net/XH8Z0.png
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 32px 0;
@media (min-width: 600px) {
flex-wrap: nowrap;
}
@media (min-width: 900px) {
flex-wrap: wrap;
// Here's where the new layout from the attached screenshot should be implemented
}
}
.box-1 {
background-color: red;
color: white;
padding: 40px 32px;
width: 100%;
}
.box-2 {
width: 50%;
}
.box-3 {
width: 50%;
background: grey;
}
img {
width: 100%;
/* object-fit: contain; */
height: 100%;
transition: 0.3s;
opacity: 0.9;
}<div class="wrapper">
<div class="box-1">
<h4>
Title goes here
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
<div class="box-2">
<img src="https://www.audi.com/content/dam/gbp2/models/1920x1080-desktop-models-teaser-A211437.jpg?imwidth=1920&imdensity=1" />
</div>
<div class="box-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
</div>
</div>