可以使用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有条件地隐藏/显示它来实现我想要的“脏”版本，但这看起来像是一个丑陋的黑客。

我的草图可以使用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>