Bootstrap 4更改列順序

如何更改Bootstrap 4的flexbox網格系統的列順序？Bootstrap 4更改列順序

代碼，我有：

<div class="contents"> 
    <div class="row row-1"> 
    <div class="col-sm-6">Content Left</div> 
    <div class="col-sm-6">Content Right</div> 
    </div> 
    <div class="row row-2"> 
    <div class="col-sm-6">Content Right</div> 
    <div class="col-sm-6">Content Left</div> 
    </div> 
    <div class="row row-3"> 
    <div class="col-sm-6">Content Left</div> 
    <div class="col-sm-6">Content Right</div> 
    </div> 
    <div class="row row-4"> 
    <div class="col-sm-6">Content Right</div> 
    <div class="col-sm-6">Content Left</div> 
    </div> 
</div>

我想設置它，以便每個偶數行將有它的逆轉列訂單。 CSS我至今：

.row:nth-child(2n) .col-sm-6:first-child{ 
    float:right; 
}

的jsfiddle：https://jsfiddle.net/bq1L3gax/

來源

2017-07-25 Suthan Bala

看看這個更新的jsfiddle。 https://jsfiddle.net/bq1L3gax/5/

所有你需要做的就是使用CSS order屬性。

.row:nth-child(2n) .col-sm-6:first-child { 
    order: 2; 
}

來源

2017-07-25 01:11:34

謝謝:)者均基於2N也適用。 https://www.w3schools.com/cssref/sel_nth-child.asp該頁面上的最後一個示例。 –

@SuthanBala哦，看看那個。學習永遠不會結束！我想我們互相幫助，呵呵 –

@SuthanBala我編輯了我的問題，使用2n並更新了小提琴鏈接。繼續編碼！ :) –

有無需額外的CSS。使用flexbox ordering utils ...

演示：https://www.codeply.com/go/nEpPysXuNe

更新2018引導4（4.0.0）

<div class="contents"> 
    <div class="row row-1"> 
    <div class="col-sm-6">Content Left</div> 
    <div class="col-sm-6">Content Right</div> 
    </div> 
    <div class="row row-2"> 
    <div class="col-sm-6">Content Right</div> 
    <div class="col-sm-6 order-first">Content Left</div> 
    </div> 
    <div class="row row-3"> 
    <div class="col-sm-6">Content Left</div> 
    <div class="col-sm-6">Content Right</div> 
    </div> 
    <div class="row row-4"> 
    <div class="col-sm-6">Content Right</div> 
    <div class="col-sm-6 order-first">Content Left</div> 
    </div> 
</div>

排序類是現在order-first，order-1，order-2等..

https://www.codeply.com/go/DYHIdw8TXH

另一種方法是使用flexbox direction utils ...

<div class="row flex-row-reverse flex-md-row"> 
    <div class="col-6">A</div> 
    <div class="col-6">B</div> 
</div>

https://www.codeply.com/go/bi01mV3n0n

來源

2017-07-25 11:35:54 ZimSystem

Bootstrap 4更改列順序

回答

相關問題