Question

要反转bootstrap中的列显示，可以使用推拉：

<div class="col-md-6 col-md-push-6">Will show on right</div>
<div class="col-md-6 col-md-pull-6">Will show on left</div>

效果很好。

我想要解决这个问题，但只有当它们堆叠时......所以只能在较小的屏幕上。我不想改变视觉左/右显示但顶部/底部。

所以我有这个：

<div class="col-xs-12">want to show below</div>
<div class="col-xs-12">want to show above</div>

我不会认为你可以仅使用bootstrap的CSS来做到这一点，或者你可以吗？

Answer 1

纯CSS方法

在某些情况下可能的一种方法是旋转包装元素和子元素180度。

Example Here

.wrapper,
.wrapper > div {
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -ms-transform:rotate(-180deg);
    transform:rotate(-180deg);
}

对此方法的支持可以是found here。

作为替代方案，您也可以更改order of flexbox elements。

Example Here

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

对此方法的支持可以是found here - 添加其他前缀以获得更多支持。

如果您希望此CSS在特定屏幕尺寸下生效，只需使用媒体查询即可。以下是Bootstrap使用的媒体查询：

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

JavaScript替代品

由于你正在使用Bootstrap，你可能也在使用jQuery。这是一个小片段，它将颠倒包装器子元素的顺序。

Example Here

var wrapper = $('.wrapper');
wrapper.children().each(function(i,el){
    wrapper.prepend(el);
});

如果你不使用jQuery，这里有一个纯粹的JS方法来做同样的事情。

Example Here

var wrapper = document.querySelector('.wrapper'),
    children = document.querySelectorAll('.wrapper > div');

Array.prototype.forEach.call(children, function(el, i){
    wrapper.insertBefore(el, wrapper.firstChild);
});

Answer 2

不，你不能。

在小屏幕上，bootstrap以自然顺序显示元素。

我尝试反过来（首先是移动设备）：在HTML中按照您希望的方式在小屏幕上订购它们。然后更改更大屏幕的顺序。

反向自举堆叠在一定的大小。

2 个答案:

纯CSS方法

JavaScript替代品