跨另一个div的响应Div类行

Question

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

在桌面视图

输出预计移动搜索

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>