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>

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

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

很遗憾，您无法使用push和pull为12个列类重新排序，即col-xs-12。更改标记以便能够包含12列网格系统或使用下面的flexbox使用简单的解决方案：

@media (max-width: 768px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  #side_panel {
    order: 2;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row reorder">
  <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>

在移动视图上切换引导列

2 个答案: