-1

What is the best flex layout for something like this in desktop: div stack

Then stacked like this in mobile:

enter image description here

hey_suburbia
  • 389
  • 3
  • 16

1 Answers1

1

For my opinion you should be use this type of html and css structure.

Hope this help

Let me know further clarification. 

.container {
display: flex;
width: 100%;
height: 300px;
flex-wrap: wrap;
}

.column {
flex: 1;
display: flex;
flex-direction: column;
font-size: 50px;
text-align: center;
}

.button {
flex: 1;
color: #fff;
border: 2px solid;
}

.button.rowspan {
flex: 2;
}
<div class="container">
  <div class="column">
    <div class="button" style="background: green">1</div>
    <div class="button" style="background: blue">2</div>
  </div>
  <div class="column">
    <div class="button rowspan" style="background: red;">3 - rowspan</div> 
  </div>
</div>
jaydeep patel
  • 867
  • 4
  • 14
  • I should have pointed this out in my main post (I will edit it), but I wanted to keep all 3 content divs in a single column because I want to stack them in a mobile view. 1,3,2 – hey_suburbia Aug 02 '18 at 18:09
  • Then you should be use jquery, B'coz using css it's not possible. We need to swap div. Please see here is i will create demo: https://codepen.io/jaydeeep/pen/rrvbEg – jaydeep patel Aug 03 '18 at 05:06