Question

我使用Twitter Bootstrap 3进行了交替的双列布局。

第一行左侧有图像，右侧有文字。第二行左侧有文本，右侧有图像。等等。

我想做的是在较小的屏幕（小于768像素）上，它变成单列布局，图像在右侧的行交换两列的内容，以便显示图像顶部。

右侧图片的行的类别为even。

以下是even行的html：

<div class="row">
    <div class="col-sm-6 left evenleft">
        text
    </div> <!-- end col-sm-6 -->
    <div class="col-sm-6 right evenright">
        image
    </div> <!-- end col-sm-6 -->
</div> <!-- end row -->

这是我尝试使用的jQuery：

function swap() {
    $('.even').each(function () {
        var left, right;
        left = $(this).find('.evenleft').html();
        right = $(this).find('.evenright').html();
        if ($(window).width() < 768) {
            $(this).find('.evenleft').html(right);
            $(this).find('.evenright').html(left);
        } else {
            $(this).find('.evenleft').html(left);
            $(this).find('.evenright').html(right);
        }
    });
}
$(function () {
    swap();
});
$(window).resize(function () {
    swap();
});

当您启动已重新调整大小的页面时，它可以正常工作。但是当重新调整浏览器大小时，它不起作用。

我有点迷失在这里。

Answer 1

您可以先放置图像并将其向右浮动。我想你根本就不需要JS。

Answer 2

您可以使用.col-sm-pull-6和.col-sm-push-6：

<div class="row"> <div class="col-sm-6 col-sm-push-6"> image </div>  <div class="col-sm-6 col-sm-pull-6"> text </div>  </div> 

http://plnkr.co/edit/0f1Id9VYZlRel66OeKni?p=preview

在小屏幕上使用jQuery交换列的内容

2 个答案: