如何在没有脚本的情况下在CSS / HTML中实现这种布局？

Question

我有四个内容块，每个内容只能在特定的方向上增长：

但是，如果B变得高于A：

，我也希望C换行

我也不能在容器上放置固定的高度。

HTML / CSS是否可以不使用脚本？我只需要支持IE10 +，没有其他浏览器，因此可以使用for i... I[...i] = np.linalg.inv(...) # if inv can't be vectorized U = np.einsum(..., I+lambda_u, VCV2) 和flex-box。

另外说明：我想尽量减少空格，同时仍然保持A和C的触摸并将B保持在A的右边。最接近的我管理的是this，但它并没有保留A和B在一起。

＆＃13;

＆＃13;

grid

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.A, .B, .C, .D {
  width: 200px;
  min-height: 30px;
  background-color: tomato;
  padding: 5px;
  margin: 5px;
}

/* NARROW VERSION */
@media (min-width: 400px) {
  /* WIDE VERSION */
  .container {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
  }

  .A {
    width: calc(50% - 10px);
    order: 1;
  }

  .B {
    width: calc(50% - 10px);
    order: 2;
  }

  .C {
    width: auto;
    order: 3;
  }

  .D {
    width: 100%;
    order: 4;
  }

  .A, .B, .C, .D {
    background-color: teal;
    flex-basis: content;
    min-width: calc(50% - 10px);
  }
}

＆＃13;

＆＃13;

＆＃13;