Question

美好的一天！我想弄清楚下面的情况是否可能。

当它在桌面/笔记本电脑上时，布局应该是这样的

<div class="col-md-3">
sidebar
</div>

<div class="col-md-9">
article
</div>

当它在小屏幕上时，两个div将切换，必须像这样

<div class="col-md-9">
sidebar
</div>

<div class="col-md-3">
article
</div>

感谢你的回答！

Answer 1

你可以！通过向<div>添加多个网格类，您可以为每个断点定义列的大小。在您的情况下，边栏上可能是col-xs-9 col-md-3，文章上可能是col-xs-3 col-md-9。这会使侧栏占据12列中的9列，用于xs和sm断点大小，12列中的3列用于md和lg断点大小。

以全屏模式打开以下示例以使用断点。

＆＃13;

.box {
  border: 1px solid #c66;
  background-color: #f99;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-9 col-md-3 box">
  sidebar
</div>
<div class="col-xs-3 col-md-9 box">
  article
</div>

＆＃13;

根据您的评论，我发现您希望文章位于侧边栏的小屏幕上。这有点棘手。你需要做三件事：

首先从小屏幕布局开始开发移动设备。您需要更改侧边栏和文章<div>的顺序。
确保在小屏幕上，使用col-xs-12，侧栏和文章占据了12列中的12列。这会使侧边栏被推到文章下方。
请注意，在桌面屏幕上，侧边栏和文章确实显示在彼此旁边，但侧边栏位于右侧而不是左侧。您可以通过添加col-md-pull-9（左侧需要向左拉9列，文章占用的列数）向左拉边栏来更改此设置，并通过添加{将文章推向右侧{1}}（您需要向右推3列，侧边栏占用的列数。）

请参阅更新的示例：

＆＃13;

col-md-push-3

＆＃13;

.box {
  border: 1px solid #c66;
  background-color: #f99;
}

＆＃13;

Answer 2

引导程序的前缀很少，无法指定宽度等级：-xs- / -sm- / -md- / -lg-（从最小到最大宽度）。

因此，从-md-和更大的屏幕，您有col-md-3和col-md-9。要在前-md-课程中按相反顺序排列，您可以指定-xs-或-sm-前缀。

所以要改变你的课程，只需写下：

<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>

Answer 3

试试这个：

<div class="col-sm-9 col-md-3">
 sidebar
</div>

<div class="col-sm-3 col-md-9">
 article
</div>

这将在eXtraSmall（xs）和SMall（sm）以及3个Block for MeDium（md）和LarGe（lg）中显示9个块的侧边栏，反之亦然。

Bootstrap GRID系统可能吗？

3 个答案: