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;}