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。