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

Question

我想做的是用bootstrap‘col-md-4’元素制作一个3x3网格。每个网格元素都有一个按钮。当点击网格元素中的按钮时，该网格元素将扩展到12 大小

有没有一种简单的方法可以制作出这样的图像。我的意思是强制下一个"col-md-4"项目移动到顶行col-md-12上方的空白处(如果有空间(。

请检查小提琴

html:

<div id="functions" class="row">
<div id="funkcja1" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f1</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja2" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f2</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  </div>

<div id="funkcja3" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f3</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  
</div>

<div id="funkcja4" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f4</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja5" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f5</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja6" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f6</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  </div>
<div id="funkcja7" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f7</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  </div>
<div id="funkcja8" class="function_item funkcja col-md-4">
<div class="function_inside">       
<p>f8</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  </div>
<div id="funkcja9" class="function_item  col-md-4">
<div class="function_inside">       
<p>f9</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>  </div>
</div>

js:

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');

});});

Answer 1

1. 为每个红框指定一个唯一的id属性(从0到8(
2. 将类名修改附加到单击事件(正如您在示例代码中所做的那样(
3. 使用余数函数检查单击框的顺序(3的余数(
4. 将以下框(在单击框之后(移动到与余数函数输出有关的空格中

这些jQuery函数可能很有用：

.insertBefore()
.detach()
.prepend()