插入側山坳裏面的內容要移動時（自舉3）

我有一個佈局像這樣在MD/LG（原諒可怕的痛苦）：插入側山坳裏面的內容要移動時（自舉3）

在SM/XS我的設計者希望它成爲：

我當前的標記是：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-md-10"> 
     <div class="col-xs-12"> 
     content1 
     </div> 
     <div class="col-xs-12"> 
     content2 
     </div> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
    </div> 
    </div> 
</div>

很明顯，這個側邊欄在內容之下，而不是在內容之間。

我已經嘗試了很多東西，我認爲它不是純CSS/HTML中可行的，除非我使用僅可見-xs的副本列並使另一個隱藏-xs ...

任何想法？

謝謝！

來源

2015-10-13 Growiel

我不t認爲'twitter-bootstrap'中可以有'col-xs-60 col-md-50'。它只能達到'12' –

我們使用自定義版本的bootstrap（使用（http://bootstrapk.com/customize）製作的60列。不是我的選擇。想象60將12和50分成10列。 – Growiel

如果你可以在視口變化之間發佈你想要實現的圖像/模型，它會讓這個變得更簡單明瞭。 – vanburen

是的，你可以做到這一點，只需添加pull-right類和重新排序的山坳這樣

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-10" style="background:red"> 
     content1 
     </div> 
    <div class="col-xs-12 col-sm-2 pull-right" style="background:gray"> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
     side col<br /> 
    </div> 
     <div class="col-xs-12 col-sm-10" style="background:green"> 
     content2 
     </div> 
    </div> 
</div>

DEMO（調整寬度，你可以看到的cols改變）

來源

2015-10-13 03:38:21

感謝您的回答。對於12個山坳部分，我們使用的是引導的定製版本與60周的cols，可悲的是，我忘了改變的cols問我的問題。在你的榜樣兩個內容是並排的，我需要它們一個在另一個之下。 – Growiel

@Growiel好吧，對不起，誤解，看到我的編輯，並讓我知道如果它像你想 –

完美的作品，謝謝！ – Growiel

插入側山坳裏面的內容要移動時（自舉3）

回答

相關問題