Overlay column 1 on column 2 - html

Question

I'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the 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>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.

Answer 1

Try position absolute with push. You can use Z-index to get the correct column on top.
<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>