引導程序3在響應中將左列向右移動

Question

只有當它是平板電腦或手機時，纔有可能在左側的引導程序中獲得一列，並且它位於右側。 （讀取;在底部，或在右列）

桌面視圖：

___________________________ 
|Menu 1 | the-main-column | 
|Menu 2 |     | 
--------------------------- 

平板電腦/手機的看法：

_________________ 
| menu 1   | 
------------------ 
| the-main-column| 
------------------ 
| menu 2   | 
------------------ 

我有它設置如下：

<div class="container"> 
    <div class="col-md-4"> 
     <div class="menuone"></div> 
     <div class="menutwo"></div> 
    </div> 
    <div class="col-md-8"> 
     <div class="content"></div> 
    </div> 
</div> 

但是，這顯然不會工作

Answer 1

是的，您可以在左欄中使用.col-md-push-8將左欄向右推。

另外，您可以在主要內容上使用.col-md-pull-4。

謝謝埃文提醒我發佈代碼演示，我今天通過閱讀更新後的問題對此問題有了新的認識。

下面是解決方案：

@media (min-width: 768px) { 
 
    #content-container { 
 
    position:relative; 
 
    } 
 
    #main { 
 
    position:absolute; 
 
    top:0; 
 
    right:15px; 
 
    } 
 
    #menu-2 { 
 
    float:none; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<div id="content-container"> 
 
    <div class="col-sm-4" id="menu-1"> 
 
    Menu 1 
 
    <p>Try viewing in full page.</p> 
 
    </div> 
 
    <div class="col-sm-8" id="main"> 
 
    Main 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat pharetra nisl, vitae dapibus est imperdiet eu. Suspendisse id eros ligula. Maecenas eu massa ut quam consequat vulputate. Maecenas sed dui nisl. Quisque volutpat eleifend pellentesque. Praesent auctor bibendum sapien, eget mollis ligula molestie nec. Quisque aliquam lectus sit amet ante hendrerit vehicula. Fusce quis feugiat nunc. Suspendisse quis condimentum metus. Praesent sit amet ligula ex. Praesent viverra sit amet urna eu semper. Suspendisse venenatis varius maximus. </p> 
 
    </div> 
 
    <div class="col-sm-4" id="menu-2">Menu 2</div> 
 
</div>

該解決方案採用額外的CSS工作。 CSS應該足夠簡單以便理解。但你可以發表評論讓我知道進一步解釋。 :)