title: Overlay column 1 on column 2
body: <p>I'm trying to implement a mobile view where the first column of the row goes on top of the second column.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;&lt;div class="loginpart"&gt;&lt;img id ="icon" src="../images/athletics-logo.png"/&gt;&lt;h2&gt;Athletes Profiling &lt;/h2&gt;
              &lt;input type="button" class="login" name="login" value="Log In"/&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;div class="col-md-8" style="padding: 0"&gt;&lt;img id ="header"/&gt;&lt;div class="mantra"&gt;&lt;h2&gt;Go Wolves!&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now the thing is, I want the <code>loginpart</code> class to go on top of the <code>col-md-8</code> when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.</p>
  
  <pre><code>A | B = A goes on top of B
  </code></pre>
  
  <p>If the implementation or my understanding is faulty, please do educate me. Thanks!</p>
  
  <p>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.</p>