可能使用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格被推到一個新行。我試過推/拉柱沒有運氣。

我可以通過複製＃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>