Отвечающие строки класса Div по другому div

Question

Может ли кто-нибудь мне помочь? У меня проблема, когда DIV с классом rows получает над другим div rows.

В Desktop View

ожидается выход Mobile View

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>