2列のブートストラップレイアウトで1つの列を上に移動するにはどうすればよいですか？

Question

2つの列ブートストラップレイアウトの上にヘッダーイメージがあります。

<section class="header" style="background: url(header-image.jpg)"></section> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 sectionOne"> 
      <p>some long text</p> 
     </div> 
     <div class="col-md-6 sectionTwo"> 
      <form>My form here</form> 
     </div> 
    </div> 
</div> 

は、どのように私はヘッダーの背景画像（下記参照）をカバーするために、（class= "sectionTwo"）右の列を持ち出すのですか？

---------------- 
    |    | 
    | header image | 
    |  --------| 
    |-------|  | 
    |  | 2 | 
    | 1 |  | 
    |  |--------| 
    |  |  | 
    ---------------- 

私は子供に、position: absolute & top: -100pxと親のCSS相対的な位置を試してみましたが、その原因のブートストラップは、非応答性のデザインを生成します。

Answer 1

このコードは、あなたが欲しい応答レイアウトを達成するために役立つことがあります。

.header{ 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t background: yellow; 
 
} 
 

 
.flexWrapper{ 
 
\t display: flex; 
 
} 
 

 
.sectionOne{ 
 
\t width: 50%; 
 
\t height: 200px; 
 
\t background: violet; 
 
} 
 

 
.sectionTwo{ 
 
\t height: 200px; 
 
\t width: 50%; 
 
\t background: #3498DB; 
 
\t transform: translateY(-40px); 
 
}

<div class="header">Header Image here</div> 
 
<div class="flexWrapper"> 
 
    <div class="sectionOne">section 1</div> 
 
    <div class="sectionTwo">section 2</div> 
 
</div>

はあなたがあなたの必要性に応じて変換およびその他のプロパティを変更することができます。このようなレイアウトには、ブートストラップを使用する必要はありません。