Css 响应引导列

我一直在玩Bootstrap和它的响应网格布局有一段时间了，我想知道我想的东西是否可以使用Bootstrap。我想创建一个网格布局，将大屏幕上的3列调整为2列，中等大小屏幕上的2列下的第三列，最后在小屏幕上所有3列相互下

如果有人有任何建议或我可以参考的东西，那就太好了

这就是我一直在玩的东西，但由于某种原因，我不能让它按我想要的方式工作。 在大屏幕上显示以下列：

|1|3|2|

我想要的是：

|1|2|3|

|1|2|
| 3 |


<div class="row">
    <div class="col-sm-6 col-lg-3" style="background-color:black">1</div>
    <div class="col-sm-6 col-lg-3 col-lg-push-3" style="background-color:blue">2</div>
    <div class="col-sm-6 col-lg-3 col-lg-pull-3" style="background-color:red">3</div>
</div>

在媒体上，它是：

|1|2|
|3|

我想要的是：

|1|2|3|

|1|2|
| 3 |


<div class="row">
    <div class="col-sm-6 col-lg-3" style="background-color:black">1</div>
    <div class="col-sm-6 col-lg-3 col-lg-push-3" style="background-color:blue">2</div>
    <div class="col-sm-6 col-lg-3 col-lg-pull-3" style="background-color:red">3</div>
</div>

---

您可以使用内置的引导网格类。由于它是一个12柱的轴网系统，请使用以下选项：

col-lg-4

在大屏幕上分成3个

col-md-6

在中等大小的屏幕上分为2个，在下面一个

col-xs-12

在超小型和小型设备上扩展到100%

为了使第二行在中型屏幕上居中，请使用col-md-push-3通过col-lg-push-0重置较大屏幕上的边距

要跨越第二行的整个宽度，请使用col-md-12

基本面板示例 基本面板示例 基本面板示例

---

是的，这是可能的。Bootstrap有各种与屏幕大小相关的类。 你可以用

---

你把课程设置错了

在大屏幕上显示以下列：

这是因为您使用的是col-lg-pull-3和col-lg-push-3。删除这些类将在大屏幕上获得所需的结果。你用的是col-lg-3。3x3=9。您应该使用col-lg-4，因为3x4=12

1 | 2 | 3

在媒体上，这就是我想要的：

|1|2|3|

|1|2|
| 3 |


<div class="row">
    <div class="col-sm-6 col-lg-3" style="background-color:black">1</div>
    <div class="col-sm-6 col-lg-3 col-lg-push-3" style="background-color:blue">2</div>
    <div class="col-sm-6 col-lg-3 col-lg-pull-3" style="background-color:red">3</div>
</div>

---

将下面的类设置为第三个div.col-md-12，并将col-md-6用于前两个，当然这是可能的。你试过什么？哇，建议是个禁忌词。如果您不提供代码，它会吸引向下投票和关闭投票。引导网格系统已经做到了这一点，请在不同的浏览器宽度中为网格选择正确的类viewport@Roope请检查我所做的编辑。在您编辑的问题之后，我对答案进行了一些编辑。第二排现在居中了。嗨，我不想把面板放在中间，我想让它在两列下横跨整个宽度above@Mehul你应该已经能够看到它是如何工作的了，这很简单。共有12列，只需按您希望的方式更改数字即可。@Manoj将最后一列改为col-md-12。谢谢Roope！：@我建议你创建一个完整版本的问题。很难确定你要找的是什么，必须做出3个不同版本的答案。希望你能理解。