如何使用CSS折叠盒子？

Question

我正在尝试获得以下信息：

但是只有这个：

在HTML中，您可以看到div1首先，然后是Figure，然后是div2。我无法修改HTML中元素的顺序。

div和图形的大小可能会动态变化，因此在css网格中分配行/列可能不会一直有效。

所以我只想在CSS中做到这一点！即我无法修改HTML代码。尝试使用Flexbox和Grid，但无法确定是否可以这样做。

帮助！

.flexc {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

#fig {
  width: 200px;
  height: 200px;
  background: gray;
  text-align: center;
  color: white;
  margin: 10px;
  border: 2px solid black;
}

#d1,
#d2 {
  width: 200px;
  height: 50px;
  background: purple;
  text-align: center;
  color: white;
  margin: 10px;
  border: 2px solid black;
}

<div class="flexc">
  <div id="d1">div1</div>
  <div id="fig">Figure</div>
  <div id="d2">div2</div>
</div>