Блог

Я работаю над адаптивным сайтом, хотя я не могу изменить HTML, только CSS и JS.

У меня есть сетка приспособлений, и когда размер экрана достигает 480 пикселей, я хочу переместить div ниже другого div.

Чтобы увидеть проблему, просмотрите эту демонстрацию, которую я настроил http://jsfiddle.net/FyXRU /

Мой код

 <div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>

<hr>

<div class="fixture">
    <div class="fixture-date">Date</div>

    <div class="teams">Teams</div>

    <div class="details">Detials</div>
</div>



$(window).resize(function() { //Fires when window is resized
    iTargetWidth = $(window).width();

    if (iTargetWidth < 770) { 
        $("div.fixture-date").insertAfter("div.teams");
    }
});
 

что мне нужно, так это перенос даты после команды div.

Любая помощь была бы отличной.

Попробуйте что-то вроде этого:

 $(window).resize(function() { //Fires when window is resized
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width <= 770) {
        $(".fixture").each(function() {
        var detach = $(this).find(".fixture-date").detach();
        $(detach).insertAfter($(this).find(".teams"));
        })
    }
});
 

пример