Jquery 根据屏幕大小交换div

我正在一个响应性强的网站上工作，虽然我不能真正改变周围的HTML，只有CSS和JS

我有一个固定装置的网格，当屏幕大小达到480px时，我想把一个div移到另一个div下面

要查看问题，请查看我设置的演示

我的代码是

<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");
    }
});

日期
团队
细节

日期
团队
细节

日期
团队
细节

日期
团队
细节
$（窗口）.resize（函数（）{//在调整窗口大小时激发
iTargetWidth=$（window.width（）；
如果（iTargetWidth<770）{
$（“div.fixture-date”）。后面插入（“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"));
        })
    }
});

$（窗口）.resize（函数（）{//在调整窗口大小时激发
var width=（window.innerWidth>0）？window.innerWidth:screen.width；
如果（宽度）我不知道您的css文件，但使用媒体查询，您可以将
团队
浮动到左侧，并且
固定日期
必须在浮动后进行。所有操作都可以仅从css完成。项目将为100%宽度，因此不会真正起作用。请注意mate。非常感谢