CSS：实现此响应式布局的替代方法

Question

我在一个网站上工作，遇到了我认为很简单的事情。我的最终结果包括一些笨拙的定位以实现布局，因此我在这里寻求另一种方法。

这是我要实现的布局：

这是一个响应式布局。这是我需要考虑的一些事情：

1. 包装盒的顺序很重要。因此，在移动设备上， 框彼此重叠，先是蓝色，然后是绿色，橙色和青色。
2. 在桌面上，它应类似于所附的屏幕截图。二 列。左侧顶部为绿色，底部为青色。右边是蓝色的 顶部，底部为橙色。
3. 所有方框均为动态高度。
4. 没有关于技术的规则（CSS网格，flexbox， 浮动）或HTML。但是，我正在努力避免疯狂的事情。我是 寻找一个好的最终解决方案。不是实验性的东西。
5. 我也在努力避免重复内容并隐藏/显示它 使用CSS。
6. 我也避免使用任何CSS框架。

我最终获得了一些怪异的定位来实现它，但是也许我过于复杂了。所以我想我会来这里问问是否有人能想到一个好的解决方案？如果您愿意帮忙，我准备了一个小提琴供您玩：jsfiddle id：0sonrdbj

提前谢谢！我期待学习一两件事。