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

我有一个交替的两列布局与Twitter引导3

第一行左边是图像，右边是文本。第二行左边是文本，右边是图像。等等

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

右边有图像的行的类为

偶数

以下是

偶数行的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();
});

函数交换（）{
$（'.偶数'）。每个（函数（）{
左，右；
left=$（this.find（'.evenlight'）.html（）；
right=$（this.find（'.evenright'）.html（）；
如果（$（窗口）.width（）<768）{
$（this.find（'.evenlight'）.html（right）；
$（this.find（'.evenright'）.html（左）；
}否则{
$（this.find（'.evenlight'）.html（左）；
$（this.find（'.evenright'）.html（右）；
}
});
}
$（函数（）{
交换（）；
});
$（窗口）。调整大小（函数（）{
交换（）；
});

当您开始重新调整页面大小时，它可以完美地工作。但是当重新调整浏览器的大小时，它就不起作用了

我有点迷路了。
您可以先放置图像，然后将其向右浮动。我想你根本不需要JS。你可以使用
.col-sm-pull-6
和
.col-sm-push-6
：


形象
文本

我没有想到这一点！我试试看。非常感谢！很好！哇！以前从未注意过这些课程！谢谢