Bootstrap 3 div崩潰命令

Question

我使用Bootstrap 3來構建網站。我有以下的佈局如右圖所示，在這裏：

被編碼如下：

<div class="col-md-12 main-content"> 
    <div class="col-md-2 sidebar-left"> 
     <!-- Left sidebar content here --> 
    </div> 
    <div class="col-md-7 main-articles"> 
     <!-- Main articles go here --> 
    </div> 
    <div class="col-md-3 sidebar-right"> 
     <!-- Right sidebar content here --> 
    </div> 
</div> 

當您使用手機查看/提交的佈局顯示是這樣的：

1st div - left sidebar (pictured in red)  
2nd div - main-articles (pictured in yellow) 
3rd div - right sidebar (pictured in greenish) 

我希望它能像這樣顯示：

2nd div - main-articles (pictured in yellow) 
1st div - left sidebar (pictured in red)  
3rd div - right sidebar (pictured in greenish) 

有什麼方法可以解決這個問題嗎？謝謝。

Answer 1

在您的手機媒體查詢，添加花車您的div像這樣..

#1st{ 
float:right; 
} 
#2nd{ 
float:left; 
} 
#3rd{ 
float:right; 
} 

這應該得到您想要的佈局。

Answer 2

嘗試這個

<div class="row"> <div class="col-sm-7 col-sm-push-2 main-articles"> Main articles </div> <div class="col-sm-2 col-sm-pull-7 sidebar-left"> Left sidebar </div> <div class="col-sm-3 sidebar-right"> Right sidebar </div> </div>

觀看演示：http://jsfiddle.net/Debananda/y54kX/