Bootstrap 3到4转换，嵌套行不起作用

Question

我正在使用一个包含很多现有页面的网站来更新站点，我不想改变基于Bootstrap 3的标记。我正在使用Bootstrap 4构建新模板，并且遇到了导致列在Bootstrap 4中折叠的特质，因为它缺少行类。

此修复程序只是在id =“ bottom”中添加一个行类（或添加另一个包装器），但是编辑所有这些页面是不可行的，我也不能假设代码从一个页面到另一个页面都相同将任何JS修补程序钩入其中。如何使Bootstrap 3嵌套行行为在Bootstrap 4中起作用？旧网格和flexbox网格之间是否有些不兼容？

<main class="main-container">    
    <div class="container page-container">
        <div id="content" class="row row-with-vspace site-content">
            <div class="col-md-12 content-area" id="main-column">
                <main id="main" class="site-main" role="main">
                    <div id="bottom">
                        <h1>12 column</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        <div class="col-md-8">
                            <h4>8 column</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <!--.col-md-8 -->
                        <aside class="col-md-4 menu list-group">
                            <div class="list-group-item">
                                <h4>4 column that bumps out</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                            </div>
                        </aside>
                        <div class="col-md-12">
                            <h2>12 column</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <div class="col-md-6">
                            <h3>6 column</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet. </p>
                        </div>
                        <!--.col-md-6 -->
                        <div class="col-md-6">
                            <h3>6 column that bumps out</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <!--.col-md-6 -->
                    </div>
                    <!--.col-md-12 -->
                    <div class="profile col-md-12">
                        <h3>12 column</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet. </p>
                    </div>
            </main></div></div></div></main>

我在jsfiddle上整理了该问题的工作示例

具有列功能的Bootstrap 3 https://jsfiddle.net/slideaway/u42h61fa/1/

引导程序4无法正确显示列 https://jsfiddle.net/slideaway/d1nj260c