bootstrap4：在较小的屏幕上重叠列

Question

我有2列bootstrap4布局，其中上半部分打算用作图像，另一半将具有形式。但是，我希望第二列在小屏幕上首先重叠，而不是向下滚动到第一列下方。

如何实现？

<div class="container">
  <div class="row">
    <div class="col-md-6 h-100 bgcolumn">
    </div>  
    <div class="col-md-6 h-100 text-center">
      <h1>
      HELLO
      </h1>
    </div>
  </div>  
</div>

https://jsfiddle.net/aq9Laaew/90676/