bootstrap col push pull使用移动版

Question

顶部：桌面版底部：移动版。 我想在移动大小（col-xs）时将div A移动到页面底部。 我试图解决这个问题，但我不能。 如果我不能使用推拉功能，请告诉我可以使用CSS或JavaScript。

Answer 1

不，这不是Bootstrap内置的类所能实现的。 CSS3可以使用Flexbox OR和jQuery。

我对jQuery不太满意，但你可以做到这一点：

function moveA() {
    if ($(window).width < 768) {
        $(".a").insertAfter(".c");
    } else {
        $(".a").insertBefore(".b");
    }
}

$( window ).resize(function() { moveA }

每次调整窗口大小时，都会触发moveA函数。 moveA计算屏幕是否达到所需宽度，然后在C之后或B之前移动A.

使用Flex3的CSS3，您可以将项目容器设置为display:flex并在媒体查询中更改

@media screen and (max-width:768) {
    .a {
        order: 2;
     }
}

还有更多内容，但您可以在此处看到Flexbox解决方案：

http://codepen.io/tinyglowstudio/pen/meEYNB

Answer 2

是的，你可以做到。将a推到c以外。通过这种方式，中间部分将采用其全宽。在小型设备中增加两个两个的宽度。 我在网站上做同样的事情 http://cyborgcreation.in调整横幅图片联系信息和社交按钮。