Bootstrap列順序3

如何重新排列Bootstrap 3中的列？Bootstrap列順序3

在桌面視圖

[A - 60% block] [B - 40% block] 
[C - full block]

在平板電腦和手機瀏覽

[A - long block] 
[C - long block] 
[B - long block]

HTML代碼

<div class="row"> 
    <div class="col-sm-8">A</div> 
    <div class="col-sm-4">B</div> 
    <div class="col-sm-12">C</div> 
</div>

來源

2017-03-08 mahi rastogi

作爲最佳實踐的StackOverflow的一部分，永遠分享你的工作代碼，不管它是多麼的錯誤。 –

Mahi，你可以添加一個額外的重複'DIV'，這將在Desktop/mobile中可見並將其隱藏在另一個'viewport'中（就像切換一樣）。因爲你想要實現的佈局不能直接在Bootstrap中使用，除非你使用'position：absolute'屬性。 –

HTML：

<div class="container"> 
    <div class="row"> 
    <div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div> 
    <div class="reorder-sm"> 
     <div id="b" class="col-md-5 col-sm-12 col-xs-12">B</div> 
     <div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div> 
    </div> 
    </div> 
</div>

個

CSS：

@media (max-width: 991px) { 
    .reorder-sm { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 

    direction: rtl; 
    } 

    .reorder-sm > [class*="col-"] { 
    -webkit-transform: rotate(-180deg) translate(0,300%); 
    -moz-transform: rotate(-180deg) translate(0,300%); 
    -ms-transform: rotate(-180deg) translate(0,300%); 
    -o-transform: rotate(-180deg) translate(0,300%); 
    transform: rotate(-180deg) translate(0,300%); 

    direction: ltr; 
    } 
}

爲完整的解決方案見fiddle。你也可能會發現this similar question有幫助。

另一種解決方案：

<div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div> 
<div id="b1" class="col-md-5 hidden-sm hidden-xs">B</div> 
<div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div> 
<div id="b2" class="visible-sm visible-xs col-sm-12 col-xs-12">B</div>

來源

2017-03-08 13:29:42

我已經更新了我的答案。請檢查這是否準確，@DeepakYadav和mahi。 –

Bootstrap列順序3

回答

相關問題