4 列 1280 像素，第 3 列低于第 2 列，1024 像素答案

【问题标题】：4 columns at 1280px, 3rd column below 2nd at 1024px4 列 1280 像素，第 3 列低于第 2 列，1024 像素
【发布时间】：2014-11-05 05:32:34
【问题描述】：

我刚刚开始使用引导程序，无法弄清楚如何让一个列出现在中型设备的另一列下方。

大型设备

[A] [B] [C] [D]

中型设备

[A] [B] [D]
    [C]

小型设备

[A]
[B]
[C]
[D]

理想情况下，对于中型设备，我希望 C 列出现在 B 下方，但看不到这样做的方法。所有列应具有相同的宽度。迷茫

抱歉，刚刚开始阅读文档。我尝试将 B 列和 C 列放在 6 列 div 中，但在全尺寸时，它不会显示宽度相等的列，也不会在 b 下显示 c。这是我目前的布局。

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-12">Column A</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column B</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column C</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column D</div>
</div>

【问题讨论】：

您忘记包含您尝试过的内容以及为什么它不起作用或让您感到困惑的原因。在当前状态下，您的问题是对代码的请求。
我已经添加了到目前为止我尝试过的内容，抱歉我才刚刚开始学习引导程序。
看来您需要继续阅读文档，因为这不是网格系统的工作方式。查看their examples 并在JSFiddle 或Bootply 等在线IDE 中与他们一起玩。
要在 1024px 上精确地做到这一点，您需要创建自定义 css。正如@CarrieKendall 所引用的，最近的断点是 992px 或 1200px。
所以你必须阅读更多关于 Bootstrap 的内容。太糟糕了，这里有人反对投票高兴。您的问题是合法的，您只是在寻找一些有用的方向。看看我的正确但 -4 否决的答案，它会让你走上正轨。它会给你你想要的，你只需要修改 BS 断点来满足你的特定宽度要求。

标签： css twitter-bootstrap-3

【解决方案1】：

这很容易。使用 Bootstrap 3，您可以从最小到最大构建。所以默认应该是你的第三种情况。我不记得默认的 xs 断点是什么宽度，但如果低于 500 你仍然没有得到单列，只需添加类 .col-sm-12 A-D。

然后添加.col-md-4 以获得您的中号机箱。您可能需要将.col-md-offset-4添加到[D] 以获得您想要的定位。

最后给每个 A-D 上课.col-lg-3

应该这样做：

<div class="row">
    <div class="col-md-3">Column A</div>
    <div class="col-md-6 row">
        <div class="col-md-12 col-lg-6">Column B</div>
        <div class="col-md-12 col-lg-6">Column C</div>
    </div>
    <div class="col-md-3">Column D</div>
</div>

【讨论】：

不需要从内存中拉取，断点在doc
我投了反对票，因为你的例子 doesn't work 和你的解释没有意义。
在不添加任何对答案或讨论有帮助的情况下投反对票的方式。
我实际上确实通过告诉你我为什么投反对票来增加讨论。 This is how content is graded on Stack Overflow。许多人不会（也不必）给出他们投反对票的理由。当您的回答有意义且准确时，我很高兴删除反对票:)