引導程序3中的重新排序列未按預期工作

例如，在下面的示例中，列A在左側，列B在右側用於除移動（xs）之外的所有屏幕。

當xs移動斷點被擊中時，A在上面而B在下面。期望的行爲是B應該在頂部，A應該在底部。我做了一個簡單的例子，但我也需要使用2列以上的數據。

.a{ 
 
    background-color: darkred; 
 
    color: #fff; 
 
} 
 
.b{ 
 
    background: darkgrey; 
 
} 
 
.a,.b{ 
 
    font-size: 40px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 a">A</div> 
 
    <div class="col-xs-12 col-sm-4 b">B</div> 
 
    </div> 
 
</div>

的jsfiddle鏡：https://jsfiddle.net/hfd9jm5e/

我已經試過COL-XS-推的每個組合/拉我能想到的，但它似乎並沒有工作，如文檔介紹。

如何更改移動設備上的行順序？

來源

2016-02-12 Guerrilla

查看[列排序]（https://getbootstrap.com/css/#grid-column-ordering）類，這些組合將做到這一點。 *編輯*或不：0 –

@KarlDawson就像我在問題中說的。我已經嘗試了所有col-xs-push/pull的組合，但我不能像文檔中所說的那樣工作，儘管文檔非常簡短。 – Guerrilla

@MumfordJw解決了它（I + 10'd） - 工作阻礙了我完成實驗。 'col-xs-12'基本上以100％的寬度來支持源代碼順序，所以通過將A + B轉換爲B + A並在下一個斷點處使用推/拉類，您可以操作可視佈局。 –

嘗試：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4 col-sm-push-6 b">B</div> 
    <div class="col-xs-12 col-sm-6 col-sm-pull-4 a">A</div> 
    </div> 
</div>

我改變了你的小提琴上面，它似乎做工精細。

來源

2016-02-12 10:34:38 MumfordJw

謝謝你的工作，但它讓我感到困惑。在sm上使用拉讓我覺得它會改變sm的順序而不是xs。我不明白爲什麼會有這種影響。 – Guerrilla

我現在意識到它首先將其從移動設備改爲流動設備。這就是爲什麼我需要改變下一個轉折點。 – Guerrilla

引導程序3中的重新排序列未按預期工作

回答

相關問題