css - 某些尺寸的反向 Bootstrap 堆叠。

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>

我认为您不能单独使用 bootstraps 的 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);
});