爲響應視圖

Question

引導結構變化我有在網絡視圖

http://shahnashok.com/stackoverflow/b-webView.png

下，我想在響應視圖

http://shahnashok.com/stackoverflow/b-responsiveView.png

以下結構怎樣在兩者達致這查看單個結構，

<div class="left"> 
    <div class="row">1</div> 
    <div class="row">2</div> 
    <div class="row">3</div> 
</div> 
<div class="right"> 
    <div class="row">4</div> 
</div> 

CSS

.left{ 
    width: 30%; 
    float: left; 
} 
.right{ 
    width: 70%; 
    float: right; 
} 

@media (min-width: 720px) 
{ 
    .left, .right{width: auto; float: none;} 
} 

Answer 1

單獨使用Bootstrap將無法爲您提供完美的對齊方式。你的CSS看起來不錯，但你需要更新你的HTML。您可以在這裏查看小提琴：http://jsfiddle.net/m0nk3y/384upoer/1/。這是我如何組織HTML：

<div class="container"> 
    <div class="row"> 
     <div class="blue col-xs-4"></div> 
     <div class="green col-xs-8"></div> 
     <div class="yellow col-xs-4"></div> 
     <div class="red col-xs-4"></div> 
    </div> 
</div> 

我希望能幫助某種方式。祝你好運！