Javascript+；HTML根据手机大小更改HTML

我试图完成的工作无法通过CSS中的媒体查询完成

<div class='bottom'>
    <div class='left'>
        <input type='submit' class='default' value='<?php echo order; ?>'/>
    </div>
    <div class='right'>
        <input type='submit' class='default' value='<?php echo clear; ?>'/>
        <input type='submit' class='default' value='<?php echo save; ?>'/>
    </div>
</div>

谢谢大家，解决了

if (window.matchMedia('(min-device-width: 533px)').matches) {
    var class_bottom = $(".bottom").html(); // duplicated

    $(".bottom .left").remove(); // works
    $(class_bottom + " .right").remove(); // doesn't work
    $(class_bottom).insertAfter($(".bottom")); // doesn't work
}

if (window.matchMedia('(min-device-width: 533px)').matches) {
    var class_bottom = $(".bottom").clone(); // nice trick

    $(".bottom .left").remove();
    $(class_bottom).find('.right').remove(); // remove right on clone
    $(class_bottom).insertAfter($(".bottom")); // insert AFTER the original class
}

---

您可能需要使用Bootstrap3来寻找响应性布局。Bootstrap 3可以解决上述问题。。。

---

你的问题是什么？+请添加演示以解决此问题。我很肯定会有一个简单的solution@DonJuwe，基本上，我希望得到帮助，以使其在javascript中工作。。其中显示“不工作”。@nico我将尝试使用JSFIDLE。

if (window.matchMedia('(min-device-width: 533px)').matches) {
    var class_bottom = $(".bottom").clone(); // nice trick

    $(".bottom .left").remove();
    $(class_bottom).find('.right').remove(); // remove right on clone
    $(class_bottom).insertAfter($(".bottom")); // insert AFTER the original class
}