如何在Bootstrap 3中将元素移动到多个容器上方

Question

我正在使用Bootstrap 3建立一个网站 该网站的一部分是4个div容器：

<div class="container">
    <div id="content" class="row">
        <div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
            Menu
        </div>
        <div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
            <div class="row">
                <div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
                    Mod_1
                </div>
                <div class="col-md-12" style="background-color:#F80;">
                    Mod_2
                </div>
            </div>
        </div>
        <div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
            Main content goes here
        </div>
    </div>
</div>

布局 - 视图如下所示：

代码Fiddler

＆＃34; MOD_1＆＃34;仅在预期的桌面视图中可见。 ＆＃34; MOD_2＆＃34;应该在平板电脑视图中的菜单和主容器上方移动，但我找不到将容器放在它们两者之上的方法。

我已经尝试使用col-sm- [colnumber] -push和-pull类。但我没有得到正确的结果。