在你的问题中提到了使用行。
.row 清除了列浮动，并调整了列的左右边距，以便外部没有额外的填充，如果不使用
.row 将会破坏您的布局。这是一个非常全面的 Bootstrap 网格指南：
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works。
使用 Flexbox 是在纯 CSS 中实现它的唯一方法。为了解决旧版浏览器（包括小于或等于 IE9 的浏览器），我使用 Modernizr（此演示链接中的 Modernizr 在 html 元素上添加了
.flexbox 或
.no-flexbox，仅供此演示使用）。通过这种方式，您可以将对 flex 模型的使用隔离在支持它的浏览器上，而您的回退将是在 HTML 中设置的标准 Bootstrap 列。不要忘记遵循 GetBootstrap.com 上的网格说明。您需要制作自己的 Modernizr 构建。
要使 Bootstrap.css 在 IE8 上工作，您需要使用 Respond.js - 请参阅其文档并将 CSS 与相对路径链接到本地。使用 jQuery 1 系列，大于 1.10，尽管 1.9 可行。jQuery 2 不支持旧版 IE 8 浏览器。
DEMO：
http://jsbin.com/dimuq/1
SMALL VIEW PORT：
LARGE VIEW PORT：
CSS：
@media (min-width:992px) {
.flexbox .flex-row.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexbox .flex-row [class*=flexcol-] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox .flex-row .flexcol-editor,
.flexbox .flex-row .flexcol-preview {width:50%;}
.flexbox .flex-row .panel {
width: 100%;
}
.flexbox .flex-row .flexcol-errors {
order: 2;
width:100%;
}
}
在这里了解有关Flexbox的更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
和http://philipwalton.github.io/solved-by-flexbox/
HTML - 需要使用Modernizr检查flexbox并将类flexbox添加到html中（请参见演示js面板）
<div class="container">
<div class="flex-row row">
<div class="col-md-6 flexcol-editor">
<div class="panel panel-default">
<div class="panel-heading">Editor</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
</div>
</div>
<div class="col-md-6 flexcol-errors">
<div class="panel panel-default">
<div class="panel-heading">Errors</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et.</div>
</div>
</div>
<div class="col-md-12 flexcol-preview clearfix">
<div class="panel panel-default">
<div class="panel-heading">Preview</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
