跨另一個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>