html - 在移动 View 上切换 Bootstrap 列

Question

考虑以下几点:

<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>

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

Answer 1

Bootstrap 是移动优先的平台，因此请将您的标记更改为您希望它在具有完整 xs-12 的移动设备上的外观。然后您可以使用推拉来移动列。这是 doc's 的链接.

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