Bootstrap - 容器外的浮动图像

Question

我有一张图片，我想把它放在页面右侧的容器外面，而左边的部分是在bootstrap的容器里面。我该怎么做？

目前：

右边的图片应该是什么：

它到底应该是什么样子： 所以就像容器和容器流体的混合

我应该集中精力在容器中还是在容器液中？虽然可能很简单，但有点困惑。

我的代码：

    <div id="bio">    
<div class="container">
      <div class="row">
        <div class="col-md-6">
            <h1>Donec id elit</h1>
            <h2>Donec id elit non mi porta gravida at eget metus</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
              nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio
              dui. </p>
          </div>
        <div class="col-md-6">
          <img src="http://via.placeholder.com/1280x850" class="img-fluid" />
        </div>
      </div>
    </div>
</div>

Codepen：

https://codepen.io/anon/pen/YLvraj