可以使用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>