Bootstrap 3 - 3列布局到2列布局

Question

我已经看到BS2的各种“解决方案”，但我正在寻找最佳方式来实现以下与BS3，没有重复的内容。

与Twitter的工作方式类似; 3列布局为台式机，但击中片剂/“MD”视图时，右列中堆叠的左侧用内容下面的内容，和主要内容横跨全宽：

桌面：

---------------------------------- 
    (A) 3 | (B) 6  | (C) 3 
---------------------------------- 

平板&下面

-------------------------- 
    (A) 3 | (B) 9 
    (C) 3 |  
-------------------------- 

类似： - Bootstrap3 3-column layout to 2-column

我一直在试图用推/拉但瓦特没有运气。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3" ui-view="left-sidebar"></div> 
     <div class="col-xs-3 col-lg-push-6" ui-view="right-sidebar"></div> 
     <div class="col-lg-6 col-xs-col-lg-pull-3 col-xs-push-3" ui-view="container"></div> 
    </div> 
</div> 

任何更简单的解决方案？

Answer 1

这是您需要的代码。段落的长度不能在不同的屏幕宽度上显示下面代码的可用性。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-push-3 col-xs-9 col-md-6">B Pellentesque placerat metus et turpis ornare, eu porta leo tempus. Vestibulum imperdiet aliquam purus, ac blandit lacus consectetur et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi pharetra ex sagittis laoreet. </div> 
 
     <div class="col-xs-pull-9 col-xs-3 col-md-pull-6">A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec rutrum metus. Integer ut nibh ut lectus euismod congue. Aenean feugiat lobortis ipsum, a dignissim nisl imperdiet in. Etiam at erat sagittis, consequat lacus vitae, interdum lectus. Maecenas rhoncus ligula nulla, sed vestibulum leo porta ac. Vestibulum tincidunt efficitur eros eget molestie. Duis luctus ultricies eros vitae ultrices.</div> 
 
     <div class="col-xs-3">C Fusce ultricies sit amet ipsum id ullamcorper. Suspendisse potenti. Nam quis convallis lorem. Vestibulum venenatis faucibus urna, a laoreet felis imperdiet et. </div> 
 
    </div> 
 
</div>

如果有帮助，+1。