[更改容器宽度属性时如何触发列响应？

Question

所以我正在制作一个模板生成器应用程序，用户可以在其中自定义自己的模板。其中一项功能是即使在台式机上也能查看其网站在其他设备（平板电脑和移动设备）中的外观。我能够将模板的宽度更改为其各自的设备宽度，但无法触发移动设备和表格宽度中的列响应。

因此，在台式机宽度中，每行应该有3列，而在移动设备和平板电脑中，每行应该只有一列。即使我已经更改了包装器的宽度，该列也不会堆叠。

简体HTML文件

<span id = "desktop-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">desktop_windows</i>
</span>
<span id = "tablet-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">tablet</i>
</span>
<span id = "phone-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">phone_iphone</i>
</span>
<div class="container-wrapper">
    <div class="resolution-wrapper center-item">
        <section class="section">
            <div class="container">
                <div class="columns">
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                </div>
            </div>
        </section>
    </div>
</div>

Javascript（jquery）

$('#desktop-resolution').click(function() {
    var width = $('.container-wrapper').width();
    $('.resolution-wrapper').width(width);
});

$('#tablet-resolution').click(function() {
    $('.resolution-wrapper').width(768);
});

$('#phone-resolution').click(function() {
    $('.resolution-wrapper').width(375);
});

我正在使用Bulma CSS框架。我认为问题在于bulma使用媒体查询，媒体查询着眼于整个屏幕尺寸，而不是包装器来触发响应属性。关于如何解决此问题的任何提示或指示？

该功能应如何工作的示例：https://themes.getbootstrap.com/preview/?theme_id=47394

Answer 1

[我所做的实际上只是将is-multiline添加到columns类，并在移动容器宽度时将is-full添加到column类，并在容器宽度是台式机和平板电脑时将其删除。] >

[JS之前

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
    });
After（JS）

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
        $('#product-column').addClass('is-multiline');
        $('#product-column > div').addClass('is-full');
    });