引导程序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应该足够简单以便理解。但你可以发表评论让我知道进一步解释。 :)