推拉產品頁面

Question

早上好，今天的目標是用Bootstrap框架（v 3.0.3）創建一個響應式電子商務「詳細信息」頁面。

這是我們能夠做到直到現在：

移動版

桌面版本

我的代碼，省略ŧ他的標準模板：

<div class="container"> 

     <div class="row"> 
      <div class="col-xs-6 col-lg-4 blocco rosso columns">LOGO</div> 
      <div class="col-xs-6 col-lg-4 blocco verde columns">RICERCA</div> 

      <div class="col-xs-12 col-lg-6 col-lg-push-6 blocco rosso columns">TITOLO</div> 
      <div class="col-xs-12 col-lg-6 col-lg-pull-6 blocco alto blu columns">IMG</div> 

      <div class="col-xs-12 col-lg-6 columns"> 
       <div class="row"> 
        <div class="col-xs-12 col-lg-12 blocco rosa columns">PREZZI</div> 
        <div class="col-xs-12 col-lg-12 blocco arancio columns">AGGIUNGI</div> 
        <div class="col-xs-12 col-lg-12 blocco giallo columns">DETTAGLI</div> 
       </div> 
      </div> 
     </div> 

    </div> <!-- /container --> 

我需要PREZZI;爲Aggiungi; DETTAGLI divs在TITOLO下面對齊：不應該包裝線。

我的意思是TITOLO + PREZZI + AGGIUNGI + DETTAGLI應該是桌面版的邊欄，同時保持推/拉TITOLO/IMG行爲。

我可以使用Bootstrap純網格邏輯來做到這一點，還是我不得不用一些CSS自定義媒體查詢技巧來修復它？

THX

Answer 1

，如果你能控制 「TITOLO」 塊，結賬的高度此琴：
http://jsfiddle.net/554jL/

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-lg-4 columns">LOGO</div> 
     <div class="col-xs-6 col-lg-4 columns">RICERCA</div> 

     <div class="content"> 
      <div class="col-xs-12 col-lg-6 col-lg-push-6 columns">TITOLO</div> 
      <div class="col-xs-12 col-lg-6 col-lg-pull-6 alto columns">IMG</div> 

      <div class="col-xs-12 col-lg-6 columns siderbar"> 
       <div class="row"> 
        <div class="col-xs-12 col-lg-12 columns">PREZZI</div> 
        <div class="col-xs-12 col-lg-12 columns">AGGIUNGI</div> 
        <div class="col-xs-12 col-lg-12 columns">DETTAGLI</div> 
       </div> 
      </div>     
     </div>    
    </div> 
</div> 

.columns{ 
    min-height: 100px; 
    border: 1px solid #333; 
    font-size: 16px; 
} 

.alto{ 
    min-height: 400px; 
} 

.content{ 
    position: relative; 
    clear: both; 
} 

@media (min-width: 1200px) { 
    .siderbar{ 
     position: absolute; 
     right: 0; 
     top: 100px; 
    } 
}