Html 跨另一个Div的响应Div类行

有人能帮我吗？当类为

行的DIV超过另一个DIV
行时，我有一个问题

在桌面视图中

输出预期的移动视图
这里不需要引导

在桌面布局上应用css

.row {
    position: relative;
}

.first-div {
     position: absolute;
     left: 30px;
     top: -10px;
     width: 150px;
     height: 250px;
}

.fourth-div {
     position: absolute;
     right: 10px;
     top: 10px;
     width: 150px;
     height: 600px;
}

并在移动视图上应用

.first-div {
     position: static;
     width: 100%;
     height: 300px;
}

.fourth-div {
     position: static;
     width: 100%;
     height: 300px;
}

使用html：

<div class="row">
    <div class="first-div"></div>
    <div class="second-div"></div>
    <div class="third-div"></div>
    <div class="fourth-div"></div>
</div>

添加一些自定义样式：

.container{
    position: relative;
}

.row{  /* for visual purpose */
    border: 1px solid black;
    padding: 20px 0;
    margin: 20px 0;
}

.container>div:first-of-type{
    position: absolute;
    top: -10px;
    left: 20px;
    height: 50px;
    width: 50px;
    z-index:10;
}

.container>div:nth-of-type(4){
    position: absolute;
    top: 10px;
    right: 20px;
    bottom : 10px;
    width: 50px;
    z-index:10;
}

@media (max-width: 768px){ /* reset the custom styles on mobile */
    .container>div:first-of-type, .container>div:nth-of-type(4){
        position: static;
        width: 100%;
    }
}

那么你试过什么？你现在的HTML是什么？谢谢…我会试试的。