他の部門のレスポンシブ部門のクラス行

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

を3210

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

、モバイルビューにHTMLで

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

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

を適用を適用します。

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