Flexbox CSS Arrangment of Divs

Question

Попытка организовать div с использованием Flexbox и не уверен, что я хочу сделать, даже возможно.

Желательно взглянуть на 769 пикселей, чтобы столбец F расширялся по всей высоте контейнера слева, а G и H накладывались друг на друга вправо (запустите фрагмент кода, чтобы увидеть).

Как только разрешение экрана становится ниже 768, то внешний вид, который у меня есть в настоящее время, является желаемым результатом для этого вида (F и G в одной строке и H ниже, охватывающие ширину обоих).

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

Вы можете изменить flex-направление после 769px ;. Примерно так:

@media (min-width: 769px ){
    .structure-2{
        flex-direction: column;
        flex-wrap: wrap;
    }

    .element{
       flex: 1 1 auto;
       width:50%;
    }

    .f{
        height:100%;
    }
}

P.S. Я также изменил ваш @media (max-width : 1608px ) на @media (max-width : 768px ), чтобы удалить некоторые конфликты.

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

Когда ширина устройства меньше 769 пикселей:

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