Bootstrap权利移动视图顶部的列

我有一个像这样的Bootstrap页面：

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

好像：

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

所以，如果我在移动设备上查看它，列A位于顶部，但我希望B位于顶部。 这可能吗？ 我试了推拉，但没有奏效。

Answer 1

使用列sorting来完成这个。 另请参阅“列sorting”中的这篇文章

col-md-push-6会将列“推”到右侧6，而col-md-pull-6会将列“拉”到“md”或更大视图端口的左侧。 在任何较小的视图端口上，列将再次以正常顺序排列。

我觉得是什么让人失望， 是你必须把B放在你的HTML中 。 可能有不同的方法来做到这一点，A可以在HTML中超过B，但我不知道如何做到这一点…

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> 

view-port> = md

 |A|B| 

view-port <md

 |B| |A| 

Answer 2

值得注意的是，如果您使用的列不都等于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> 

否则，列的alignment将显示为closures。

Answer 3

Flexbox方向

对于Bootstrap 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; }