引导程序，如果上面的行中有空间，我如何使 size4 列跳过 size12 列

Question

What I want to do is to make a 3x3grid with bootstrap 'col-md-4' elements. Every grid element has a button. When a button is clicked in a grid element, that grid element expands to size 12

Is there a easy way to make something like this image . I mean force the next 'col-md-4' item to moved to an empty space above col-md-12 in top row (if there is space).

please check fiddle

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. Give an unique id attribute to each red box (from 0 to 8).
2. Attach class name modifications to click event (as you have already done in sample code)
3. Check the order of clicked box with a remainder function (remainder of 3)
4. Move the following boxes (just after clicked box) into empty spaces regarding to remainder function output.

These jQuery functions can be useful:

.insertBefore()

.detach()

.prepend()