响应的Div类跨越另一个div

Question

任何人都可以帮助我吗？当课程rows的DIV高于另一个div rows时，我遇到了问题。

在桌面视图中

输出预期的移动视图

Answer 1

添加一些自定义样式：

.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%;
    }
}

Bootply

Answer 2

这里你不需要引导程序。

在桌面布局上应用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>