Bootstrap GRID系统可能吗？

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断点大小。

在全屏中打开以下示例以使用断点。

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

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

---

从您的评论中我看到您希望文章位于侧边栏的小屏幕上。 这有点棘手。 你需要做三件事：

1. 首先从小屏幕布局开始开发移动设备。 您需要更改侧栏和文章<div>的顺序。

2. 确保在小屏幕上，使用col-xs-12 ，侧栏和文章占据了12列中的12列。 这将使侧边栏被推到文章下方。

3. 请注意，在桌面屏幕上，侧边栏和文章确实显示在彼此旁边，但侧边栏位于右侧而不是左侧。 你可以通过添加col-md-pull-9向左拉边栏来改变这一点（你需要向左拉9列，文章占用的列数）并将文章推到右边添加col-md-push-3 （你需要向右推3列，侧栏占用的列数）。

请参阅更新的示例：

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

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

Answer 2

bootstrap的前缀很少，无法指定宽度类： -xs- / -sm- / -md- / -lg- （从最小到最大宽度）。

所以从-md-和更大的屏幕你有col-md-3和col-md-9 。 要在pre- -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）中显示9个块中的侧边栏，在MeDium（md）和LarGe（lg）中显示3个块中的侧边栏，反之亦然。