坏主意：带调整大小的响应式菜单（）？

Question

使用jquery的resize()事件切换响应式菜单是不是一个坏主意？

好吧，它实际上不是菜单，但想法几乎相同：
我有一个带有4个盒的侧栏，其中包含不同的信息。在特定device-width我下方移动侧边栏到另一个地方。现在每个框都被隐藏，并显示<selection>。当选择更改时，它将显示所选框。

$("#my_selection").change(function () {
    $.each(all, function () {                   // "all" are just my boxes
        $(this).hide();
    });
    var val = "#my_box_" + $(this).val();
    $(val).show();
});

---

我希望到目前为止这个概念是清楚的。 那么当用户调整窗口大小时会发生什么？ （又称改变移动设备的方向）右：

缩小宽度：隐藏框
再次增加宽度：框仍然缺失

所以..太糟糕了。这是我的解决方案：

$(window).resize(function () {
    currentDisplay = $('#my_selection').css('display');

    if (currentDisplay == lastDisplay)
        return;

    lastDisplay = currentDisplay;

    if (currentDisplay == "none") {
        $.each(all, function () {
            $(this).show();
        })
    } else {
        $.each(all, function () {
            $(this).hide();
        })
    }
});

但我有点觉得这有点hacky，不是吗？那么 - 这个问题有更好的解决方案吗？

这是一个简单的草图，显示了我试图解释的设计。