引導頂部右側立柱上移動視圖

Question

我有一個引導頁是這樣的：

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

的樣子：

----- 
|A|B| 
----- 

所以，如果我看它在移動設備上，該列的在頂部，但我想B在上面。 這可能嗎？ 我試了推拉，但它沒有奏效。

Answer 1

使用Column ordering來完成此操作。另請參閱this article on Column Ordering

col-md-push-6將「推」列到右側6和col-md-pull-6將「拉」列到左邊的「MD」或更大的視圖端口。在任何較小的視圖端口上，列將再次按正常順序排列。

我想拋棄什麼人，是你必須把B放在你的HTML以上A.可能有不同的方式來做到這一點，其中A可以去上面乙方在HTML，但我不知道該怎麼辦呢？

DEMO

<div class="row"> 
    <div class="col-md-6 col-md-push-6">B</div> 
    <div class="col-md-6 col-md-pull-6">A</div> 
</div> 

視口> = MD

|A|B| 

視口<的md

|B| 
|A| 

Answer 2

值得一提的是，如果你正在使用科拉姆ns不等於6，那麼推送量將不等於初始列大小。

如果你有2列（A & B），並希望列A到更小，並就「SM」或更大的視口的權利，但頂上移動（XS）視，你會使用以下命令：

<div class="row"> 
    <div class="col-sm-4 col-sm-push-8">A</div> 
    <div class="col-sm-8 col-sm-pull-4">B</div> 
</div> 

否則，列的對齊將顯示爲關閉。

Answer 3

Flexbox Direction

自舉4，應用以下到您.row DIV之一：

.flex-row-reverse 

對於響應設置：

.flex-sm-row-reverse 
.flex-md-row-reverse 
.flex-lg-row-reverse 
.flex-xl-row-reverse 

Answer 4

下面的代碼工作對我來說

.row { 
    display: flex; 
    flex-direction: column-reverse; 
} 

Answer 5

In Bootstrap V4（發佈於2018年1月18日）您可以使用重新排序類。在重新排序選項卡下的信息。

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 6

我用：

.row { 
    display: flex; 
    flex-direction: row-reverse; 
}