Overlay-Spalte 1 in Spalte 2

Question

Ich versuche, eine mobile Ansicht zu implementieren, bei der die erste Spalte der Zeile über die zweite Spalte geht.

Hier ist der Code:

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

Nun ist die Sache ist, ich möchte, dass die loginpart Klasse auf dem col-md-8, wenn sie auf Mobil gehen. Ich habe versucht nach Antworten zu suchen, endete aber mit nichts. Ich möchte nicht, dass es übereinander gestapelt wird.

A | B = A goes on top of B 

Wenn die Implementierung oder mein Verständnis fehlerhaft ist, bitte erziehe mich. Vielen Dank!

Edit: Ich habe versucht, die Push-Pull-Bootstrap-Funktion, aber alles was es tut, ist die zweite Spalte unter der ersten Spalte (was ist nicht, was ich gehofft hatte), sondern beide Spalten überlappend, wenn auf mobile Ansicht geschaltet , nicht übereinander gestapelt.

Answer 1

Probieren Sie die Position absolut mit Push aus. Sie können den Z-Index verwenden, um die richtige Spalte oben zu erhalten.

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