引导程序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

引导程序3中的重新排序列未按预期工作

回答

相关问题