Html 不均匀div定位

我想根据图片定位一个div：

到目前为止，我成功地使用了Bootstrap的

行

类，并在CSS中使用了

z-index

。但是，当我调整浏览器的大小时，它没有响应，只是在页面的右侧浮动。顺便说一句，我使用的是

position:absolute

（我在网上读到，为了使用

z-index

，我必须使用它）。还有其他更优雅的方法吗？我希望它是响应性的，但除了我实现的那个不可靠的解决方案之外，似乎找不到任何其他的解决方法

代码：

#div2{
浮动：继承；
位置：绝对位置；
顶部：继承；
左：60%；
宽度：320px；
高度：1290px；
z指数：5；
}

第一组

第2组

第3组

我曾采用响应性设计和一些边缘定位，以保持队形一致

.container{
显示器：flex；
柔性包装：包装；
宽度：150px；
}
.div1、.div3{
右边距：5px；
宽度：50px；
高度：50px；
}
.第2分部{
右边距：5px；
宽度：50px；
高度：110px；
}

第一组
第二组


第3组

您需要利用列中的嵌套行。请看这里-。忽略此处的CSS，因为它用于代码段样式，高度用于忽略内容

.B{
最小高度：130px；
背景#393276；
边缘底部：20px；
}
.A{
最小高度：100px；
边缘底部：20px；
背景#393276；
}
C{
最小高度：250px；
背景#393276；
}
div{
文本对齐：居中；
颜色：#fff；
字体大小：32px；
}

A.
B
C

请分享您使用的代码。@ManojKumar抱歉我忘了。刚刚添加的对不起，我刚刚添加了上面使用的代码。你的答案会有用吗？@LeeM也一样，你只需将类名更改为你想要的任何名称。@LeeM会根据你的意愿进行更新。嗯，我认为这是一个更好的答案，仍然保持响应能力。谢谢