为什么我的Bootstrap列的大小与Chrome的DevTools不同？

Question

我正在建立一个响应式网站，其中我有3列，两个相同的宽度堆叠在一个等于其添加宽度的顶部。这是我对这些列的代码：

<div class="container">
                <div class="row" style="margin: 0 auto;">
                    <div class="col-sm-4 custom-offset sellers">
                        <div class="panel panel-default">
                            <div class="panel-heading paneltop"><strong>Event Information</strong></div>
                            <div class="panel-body" style="text-align: left;">...
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 sellers">
                        <div class="panel panel-default">
                            <div class="panel-heading paneltop"><strong>Authorized Ticket Sellers</strong></div>
                            <div class="panel-body" style="text-align: left;">...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="col-sm-8 custom-offset sellers">
                    <div class="panel panel-default">
                        <div class="panel-heading paneltop"><strong>Where Do the Proceeds Go?</strong></div>
                        <div class="panel-body" style="text-align: left;">
                            ...
                        </div>
                    </div>
                </div>
            </div>

当我在没有DevTools打开/设置为响应的情况下调整窗口大小时，我的列将彼此重叠并堆叠在一起，正如他们应该的那样。例如，如果我将窗口大小调整为大约480px宽，则列之间会叠加一些填充。但是，当我打开DevTools并将我的设备设置为iPhone 6 Plus（宽度为~415px）时，列保持原来的2-on-top-of-1格式。

为什么调整窗口大小并对DevTools做出响应的行为有所不同？我觉得图片可以让我的观点更好，但我没有这个选择，因为我的声誉有点低。

非常感谢任何帮助！