css - 可以使用 Bootstrap 实现这种移动/桌面布局吗？（或其他网格）

Question

我正在使用 Twitter Bootstrap 3 创建一个可移动的网站。在大屏幕上，我希望两个项目（我的草图中的 #1 和 #2）位于左侧的侧边栏中，而大内容区域（#3）位于右侧。在小屏幕（移动设备）上，我希望它们按 #1、#3、#2 的顺序堆叠。

在第三个草图中执行以下结果：

<div class="row">
    <div class="col-lg-5">#1</div>
    <div class="col-lg-7">#3</div>
    <div class="col-lg-5">#2</div>
</div>

如您所见，我的#2 div 被下推到新行。我试过推/拉柱子没有运气。

我可以通过复制 #2 并使用 CSS 有条件地隐藏/显示它来实现我想要的“脏”版本，但这似乎是一个丑陋的 hack。

我的草图可以使用 Bootstrap（或其他 CSS 网格系统）来实现吗？

Answer 1

尝试向右浮动：（参见：http ://bootply.com/78158 ）

CSS：

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}   

HTML：

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>

Answer 2

您会满足于（在移动设备上）3、1、2 吗？

http://jsfiddle.net/chevybowtie/n9Ett/3/

<div class="container">
<div class="row">
    <div class="col-md-8 col-md-push-4 r">
        <p>#3 </p>
        <p></p>
    </div>
    <div class="col-md-4 col-md-pull-8">
        <div class="col-md-12 r"><p>#1 </p></div>
        <div class="col-md-12 r"><p>#2 </p></div>
    </div>
</div>
</div>