javascript - 仅在移动 View 中折叠列，仅在桌面 View 中折叠行

Question

我正在使用 Yii2 开发我的 Web 应用程序。这是 html 布局:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail"> 
                <div class="caption">
                    <h3><?php echo $value['strategy_title']; ?></h3>
                    <p><?php echo $value['strategy_description']; ?></p>
                    <p><button  class="btn btn-info btn-holder" 
                                type="button" 
                                data-toggle="collapse" 
                                data-target="#<?php echo $value['strategy_title']; ?>"
                                aria-expanded="false" 
                                aria-controls="<?php echo $value['strategy_title']; ?>">
                        Know more
                    </button></p>
                    <div class="collapse" id="<?php echo $value['strategy_title']; ?>">
                        <p>
                            <!-- Here is the column chart -->
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row collapse" id="<?php echo $value['strategy_title']; ?>">
        <p>
            <!-- Here is the row chart -->
        </p>
    </div>
</div>

这只是整个页面的一部分。所以我实际使用的是带有折叠按钮的缩略图库，它切换隐藏在折叠 block 内的 Highchar.js。因此，当页面处于移动 View 状态时，我想让折叠按钮切换图表 block 在其下方，如图所示。 否则，当页面处于桌面 View 状态时，我想使折叠按钮切换行，这是图片上的示例。

Answer 1

我做到了，但我想我的解决方案可能不正确。所以我制作了 2 个不同类别的按钮

<p><button  class="btn btn-info btn-holder-xs" 
                            type="button" 
                            data-toggle="collapse" 
                            data-target="#<?php echo $value['strategy_title'] . "-xs"; ?>"
                            aria-expanded="false" 
                            aria-controls="<?php echo $value['strategy_title'] . "-xs"; ?>">
                    Узнать больше
                </button></p>
                <p><button  class="btn btn-info btn-holder-md" 
                            type="button" 
                            data-toggle="collapse" 
                            data-target="#<?php echo $value['strategy_title']; ?>"
                            aria-expanded="false" 
                            aria-controls="<?php echo $value['strategy_title']; ?>">
                    Узнать больше
                </button></p>

然后我写了一些css @media

@media only screen and (max-width : 768px) {
.btn-holder-xs {
    display: block;
}
.btn-holder-md {
    display: none;
}
}
@media only screen and (min-width : 768px) {
    .btn-holder-xs {
        display: none;
    }
    .btn-holder-md {
        display: block;
    }
}