引导程序div /列中未包含/响应的内容

Question

我用引导程序创建了一个轻量级CMS，它使用模板为用户提供页面布局的Divs不同方向，他们能够创建文本内容，选择图像或选择社交媒体嵌入内容来填充其选定的区域/ div。< / p>

这一切都可行，但是我的问题来自每个div内的图片和内容受到限制。我现在的特殊问题是嵌入一个Twitter网格。我的预期结果将是使该列内的内容响应，但超出列范围并引起严重的定向问题，例如用nav破坏我的顶行并将其底行推出。很明显，twitter网格在这里完全被遮挡了：

相对应的方式：

我可以使用引导程序列来做些什么来包含图像和内容，以便插入的内容仍然适合并且可以响应吗？

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width:100vw;
}

.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
  background-color: #778899  ;
  color: white;
  text-align: center;
}

.my-container>.middle {
  flex-grow: 1;
  padding:30px;
  /*background-image: url('images/bg_green.svg');*/
  background-size: cover;
}

.my-container>.middle>* {
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container-fluid my-container">

<div class="row top">
   Top Row
</div>

<div class="row middle">
  <div class="col-lg-6"  >
  <div class="row" style="height:50%; padding-bottom: 15px;">
    <div class="col-lg-12" style="height:100%;">
      <div style="height: 100%; ">
        <a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>
  </div>

  <div class="row" style="height:50%; padding-top: 15px;">
    <div class="col-lg-12" style="height:100%;">
      <div style=" height: 100%;">
        TEST
      </div>
    </div>
  </div>
</div>

<div class="col-lg-6" >
    <div style="height: 100%; ">
      TEST
    </div>
</div>
</div><!--end row middle-->

<div class="row bottom">
 Bottom Row
</div>