Bootstrap Col-push和-pull不按需要重新排序

Question

我有一个登录页面，在xs，我希望它看起来像：

和＆gt; = sm看起来像：

这个代码是：

<div id="loginPanel" class="col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
    <div class="panel panel-primary">
        <div class="panel-heading">Log in to myBethany</div>
        <div class="panel-body">
            <div id="divCredentials" runat="server" class="row">
                <label class="control-label sr-only" for="<%= tbUsername.ClientID %>">
                    Username 
                </label>
                <div class="col-xs-6 col-sm-4 control-label col-sm-offset-1 form-group has-feedback has-feedback-left">
                    <input type="text" id="tbUsername" runat="server" class="form-control" placeholder="username" />
                    <i class="glyphicon glyphicon-user form-control-feedback always-show"></i>
                </div>
                <label class="control-label sr-only" for="<%= tbPassword.ClientID %>">
                    Password
                </label>
                <div class="col-xs-6 col-sm-4 form-group has-feedback has-feedback-left">
                    <input type="password" id="tbPassword" runat="server" class="form-control" placeholder="pass phrase" />
                    <i class="glyphicon glyphicon-lock form-control-feedback always-show"></i>
                </div>

                <div class="col-xs-3 col-sm-2 form-group">
                    <asp:Button ID="btnLogin" runat="server" class="btn btn-primary form-control" OnClick="btnLogin_Click" Text="login" />
                </div>

                <div class="col-xs-9 col-sm-11" id="joinLink" style="text-align: right; padding-top: 8px">
                    New to myBethany? 
                    <a href="#" onclick="showJoin();">Create an account</a>!
                </div>
            </div>
        </div>
    </div>

现在我想插入一条错误消息：

<div id="divCredentialsMessage" runat="server" class="col-xs-12 well">
    <div class="">My error message</div>
</div>

在所有尺寸下，我都希望在用户名/密码下立即显示错误消息。

所以在xs看起来应该是这样的：

和＆gt; = sm：

请注意，错误消息和登录按钮在位置上切换了位置。根据我的阅读，这应该意味着我在密码和登录按钮代码之间插入我的错误消息代码。然后我将col-sm-push-2类添加到错误消息div，将col-sm-pull-12类添加到登录按钮div。

在xs，一切看起来都是理想的 - 这是有道理的;什么都没有改变。

当我将窗口设置为sm或更宽时，我得到的结果是：

按钮，而不是连接顶部的输入，已经一直从屏幕上移开，错误消息已从col-0移动到col-2，但保持其12-col宽度。

我已尝试将错误消息的大小调整为col-4，将其按下保持为2，并将登录按钮设置为pull-4。尽管顶部有三个可用的列，而按钮只有2个宽，但它拒绝向上移动。

从我从其他stackoverflow帖子收集到的内容，这是因为我在所有重要的列-12的边界上反转了两个div的顺序。

这有一个干净的解决方案吗？

编辑：根据评论，这里是JSFiddle

的重复

这里是JSFiddle输出窗口扩大到小尺寸时登录按钮所在位置的屏幕截图。