Flexbox CSS Arrangment of Divs - html

Question

Trying to arrange divs using Flexbox and not sure what I want to do is even possible.
Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).
Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2">F</td>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</tbody>
</table>
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H </div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You could change the flex-direction after 769px;. Something like this:
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
P.S. I changed also your #media (max-width : 1608px ) to #media (max-width : 768px ) to remove some conflicts.
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

When device width is under 769px:
- class ".f" will take the whole width - 100%
- classes ".g, .h" will take the half width - 50%
#media (max-width: 769px) {
.f {
flex: 1 100%;
}
.g,
.h {
flex:0 50%;
}
}