使用Bootstrap 4网格在col-6内创建两个cols

Question

我一直在尝试前端，并且一直在使用 Bootstrap 4 创建模板。

根据this，我应该放弃使用此HTML来创建一个布局，其中两个div占用容器的50％，一个div占用其他50％的容器。

我使用的HTML是：

<div class="row">
  <div class="col">
    <div class="col">
      <h3>Opening Hours</h3>
      <ul>
        <li>Mon: 9:00am - 5:30pm</li>
        <li>Tues: 9:00am - 5:30pm</li>
        <li>Wed: 9:00am - 5:30pm</li>
        <li>Thurs: 9:00am - 5:30pm</li>
        <li>Fri: 9:00am - 5:00pm</li>
        <li>Sat: 9:00am - 5:00pm</li>
        <li>Sun: -CLOSED-</li>
      </ul>
    </div>

    <div class="col">
      <h3>Available Services</h3>
      <ul>
        <li>Motorcycle Sales</li>
        <li>Scooter Sales</li>
        <li>Servicing</li>
      </ul>
    </div>
  </div>

  <div class="col">
    <p>Google MAPS SHIT</p>
  </div>
</div>

但是，这使两个div彼此下方，而不是内联。

A jsfiddle to clearly see the results.

如何使用网格系统创建以下内容的布局：

  

[25％25％] [50％]