设置CSS打印样式时更改Bootstrap网格

Question

我在页面上有一个DOM结构，看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-7 col-sm-8">
       Wide Stuff Here
    </div>
    <div class="col-lg-4 col-md-5 col-sm-4">
       Narrow Stuff Here
    </div>
  </div>
</div>

为打印结构设置样式时，我通常会将右侧较窄列内的内容隐藏起来。但是，我仍然想在打印页面上显示其中的两件事。问题在于左侧较宽的容器内有更多内容。结果，当该内容超出右列中的内容时，由于其右边的空白区域，它在页面上看起来不合适。

我的问题是如何解决这个问题。我想到过以某种方式让内容从左侧的宽列开始从某个点或容器开始全宽，但不确定如何实现。我也对其他人如何更好地表达这一观点持开放态度。

更具体地说，此页面显示烹饪食谱。在左列中，有一盘菜的大图片以及准备工作的图片和步骤的列表。在右列中，有一个装有配料的盒子和一个有配方等级的盒子。

任何建议都值得赞赏。