I need to implement different layouts for wide/mobile screens. Here is requirements:
Wide layout:
- #1 element has stretch-width but 50% of #1+#2 (in a row with #2) (height may be lower or bigger than #2)
- #2 element should be 50% width but max-width: 385px
- #3 should be the same width as #1
For mobile it should be simple column in order 1-2-3 (100% width)
Here is wide layout sample:
Mobile layout:
It looks easy to implement wide layout by grouping #1 and #3 in one column and #2 in second using flex, but for mobile these 3 elements should be all separate for placing #3 below #2
I understand it’s possible to implement by rendering #2 element inside or outside #1, but is it possible to make it in other way? Using css/flex or by changing html structure from css?
Here is my flexbox try, the #3 element should have the same width as #1 (and #1 can be higher or lower than #2 btw)
https://jsfiddle.net/v16wxmg7/1/
<div class="wrapper">
<div class="c1">
<div class="e1">
1
</div>
</div>
<div class="c2">
<div class="e2">
2
</div>
</div>
<div class="c3">
<div class="e3">
3
</div>
</div>
</div>
.wrapper {
background-color: #eee;
display: flex;
flex-flow: row wrap;
div {
height: 40px;
color: white;
}
@media screen and (max-width: 500px) {
flex-direction: column;
}
}
.c1 {
background-color: #900;
flex: 4 1 50%;
@media screen and (max-width: 500px) {
flex: 1 1 100%;
}
}
.c2 {
background-color: #090;
flex: 4 1 50%;
@media screen and (max-width: 500px) {
flex: 1 1 100%;
}
}
.c3 {
background-color: #009;
max-width: 180px;
flex: 0 1 50%;
@media screen and (max-width: 500px) {
flex: 1 1 100%;
max-width: none;
}
}
.e1 {
min-width: 200px;
}
.e2 {
min-width: 150px;
}
.e3 {
width: 300px;
}