Arrange cards on left and right using BS4, without having parent columns

Using Bootstrap 4 and without Javascript, how can I create an arrangement like this when the viewport is large:

And an arrangement like this when the viewport is constrained:

The only way I could get it to look like the large viewport arrangement was by doing this:

<div class="row justify-content-center">

  <div class="col-8 column-1">

    <form class="card text-center" action="runthis" method="GET">
      <div class="card-header">Hello</div>
      <div class="card-block">
        <input type="text" class="form-control input-lg" name="full_name" placeholder="Full Name" autofocus="" />
        <input type="text" class="form-control input-lg" name="full_name2" placeholder="Full Name/>
        <input type=" text " class="form-control input-lg " name="full_name3 " placeholder="Name " />
        <button name="Submit " value"submit " class="btn btn-primary ">Submit</button>
      </div>
    </form>

  </div> <!-- end column-1 -->

  <div class="col-4 column-2">
    <div class="card p-3">
      <blockquote class="card-block card-blockquote">
        <h4 class="card-title ">Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      </blockquote>
    </div>
    <div class="card">
      <div class="card-block ">
        <h4 class="card-title ">Card title 2</h4>
        <p class="card-text ">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text "><small class="text-muted ">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

You can see this code in action at https://codepen.io/anon/pen/ZKoPWx

As you can see from this code above, it doesn't allow the ability to collapse as desired when the viewport is constrained due to the parent columns of the left and right sections.

How can I do this without having parent columns?