Перестановка содержимого столбцов с JQuery на маленьких экранах

Question

У меня есть чередуя две колонки сделаны с Twitter Bootstrap 3.

Первый ряд имеет изображение слева и текст справа. Вторая строка содержит текст слева и изображение справа. И так далее.

Что бы я хотел сделать, это на меньших экранах (меньше 768 пикселей), где он превращается в одноколоночный макет, имеют строки, в которых изображение находится справа, своп содержимого двух столбцов, чтобы изображение отображалось наверху.

Строки с изображением справа имеют класс even.

Вот HTML из even строки:

<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

Вы можете использовать .col-sm-pull-6 и .col-sm-push-6:

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

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

Answer 2

Вы можете поместить изображение первым и поплавать им прямо. Я бы предположил, что вам не понадобится JS вообще.