Javascript bootstrap，如果上面一行中有空间，如何使size4列跳过size12列

我想做的是用引导'col-md-4'元素制作一个3x3网格。每个网格元素都有一个按钮。在网格元素中单击按钮时，该网格元素将扩展到大小12

有没有一个简单的方法来制作这样的东西。我的意思是强迫下一个'col-md-4'项目 移动到第一行col-md-12上方的空白处（如果有空格）

html:

为每个红色框指定一个唯一的id属性（从0到8）

附加类名修改以单击事件（正如您在示例代码中所做的那样）

使用余数函数（3的余数）检查单击框的顺序

将以下框（单击框后）移动到与余数函数输出相关的空白处

这些jQuery函数可能很有用：

.insertBefore()

.detach()

.prepend()

---

不，可能不是完全琐碎的方式。BS4使用flexbox，因此可以动态设置这些列元素的

order

属性，将它们移动到不同的位置。（或者，您也可以移动DOM中的元素，但这可能会导致绑定事件处理程序出现其他问题。）但您必须编写一些附加逻辑，根据元素的原始位置进行检查，每次将其中一个元素从col-4切换到col-12时，必须移动哪一个元素。

                jQuery(document).ready(function( $ ){
            $(".btn").click(function() {

            $('#functions').children().not('select').removeClass('col-md-12');
            $('#functions').children().not('select').addClass('col-md-4');

            $(this).closest('.function_item').removeClass('col-md-4').addClass('col-md-12');
             
            });});
             

.insertBefore()

.detach()

.prepend()