Question

我试图在bootstrap上做一个简单的布局，但我找不到一个不涉及javascript的解决方案。

我需要在中型/大型桌面上使用模板：http://jsfiddle.net/Xx3G4/1/

它必须在小型设备上保持这样：http://jsfiddle.net/Xx3G4/

如果我不够清楚，我需要阻止＆＃34; p1＆＃34;：

<div class="teemo-block">p1</div>

紧跟块＆＃34;东西＆＃34;在中/大型和小/ x小的新闻之后。

PS：

不要忘记重新调整jsfiddle的大小，以便在正确的视口上看到它;
使用javascript解决这个问题非常简单，问题是找不到它而不使用它。

感谢您的回复

Answer 1

如果你正在使用 twitter bootstrap ，如果你没有问题创建2个“p1”块，在块“stuff”之前有一个，那么有一个解决方案bootstrap类名。 Bootstrap有一个名为hidden-phone的类（在版本3中重命名为hidden-xs），它在手机中隐藏了具有此类名称的元素。 Check here

另一种解决方案是如上所述创建2个块，使用媒体查询显示一个块并隐藏另一个块。但这不是一个很好的解决方案，以防万一你没有找到任何其他方式而不涉及javascript

Answer 2

只需重新发布和翻译葡萄牙语SO（https://pt.stackoverflow.com/questions/9508/posicao-dos-blocos-em-bootstrap/9721#9721）

的答案

我已删除了类col-push和col-pull，并将其替换为pull-left和pull-right，也来自bootstrap。

<div class="col-xs-12 col-md-4 pull-right">
    <div class="teemo-block">
        p1
    </div>
</div>

因为默认情况下，bootstrap上的所有'cols'都有浮动，如果你想改变它，你必须手动更改它，这就是新闻块获得pull-left而其他块获得{的原因{1}}，迫使他们留在理想的位置。

检查结果：

http://jsfiddle.net/luckmattos/hsCw9/7/

列位于bootstrap上

2 个答案:

检查结果：