2列目のオーバーレイ列1

Question

私は、行の最初の列が2番目の列の上に移動するモバイルビューを実装しようとしています。今の事は私がするとき、モバイル上のloginpartクラスはcol-md-8の上に行きたいです

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2> 
      <input type="button" class="login" name="login" value="Log In"/></div></div> 
      <div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div> 
     </div> 
    </div> 

：

は、ここでは、コードです。私は答えを探してみましたが、何も終わりませんでした。私はそれをお互いの上に積み重ねたくない。

A | B = A goes on top of B 

実装や理解に間違いがある場合は、教えてください。ありがとう！

編集：プッシュプルブートストラップ機能を試しましたが、第2列は最初の列（これは私が望んでいたものではない）に配置されますが、代わりにモバイルビューに切り替えると両方の列が重なります互いの上に積み重ねられていない。

Answer 1

プッシュで絶対位置を試してください。 Z-インデックスを使用して、上に正しい列を取得できます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4" style="position: absolute; z-index: 1;"> 
 
      <div class="loginpart"> 
 
       <img id ="icon" src="" /> 
 
       <h2 style="color: grey;">Athletes Profiling </h2> 
 
       <input type="button" class="login" name="login" value="Log In"/> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-8 col-md-push-4"> 
 
      <img id="header" src="" /> 
 
      <div class="mantra"> 
 
       <h2 style="color: blue;">Go Wolves!</h2> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>