Html 在移动视图上切换引导列

考虑以下几点：

<div class="row">
    <div id="side_panel" class="col-md-3 cold-xs-12">
        Side panel
    </div>
    <div id="mainContentRight" class="col-md-9 cold-xs-12 ">
        Main content area   
    </div>
</div>

侧板
主要内容区

---

有没有办法切换移动视图中这些列的顺序，以便主要内容显示在侧面板之前？

Bootstrap是一个移动第一平台，因此请根据您希望它在移动设备上的完整xs-12外观更改标记。然后可以使用“推拉”移动柱。这里有一个链接到

主要内容区
侧板

不幸的是，对于12列类，即

col-xs-12

，您不能使用

push

和

pull

重新排序。更改标记以包含12列网格系统，或使用下面的

flexbox

使用简单解决方案：

@介质（最大宽度：768px）{
.重新订购{
显示器：flex；
弯曲方向：立柱；
}
#侧板{
顺序：2；
}
}

侧板
主要内容区

我原以为您更可能在手机上完全隐藏侧面板（使用.hidden xs），并用更方便移动的导航来取代侧面板。