我試圖在我的網頁上實現一個特定的布局，其中UI元素在大(lg)和中等(md)屏幕之間平滑地適應。我成功地在大屏幕上實現了第一次布局:

然而，為了在中等大小的屏幕上實現第二種布局，我將圖像包裝在一個div中，當屏幕大小調整到md時我將它移除，當屏幕大小調整到lg時我使用JavaScript將它添加回來。它在第一次加載時工作正常，但是當我從lg調整到md再回到lg時，布局顯示與初始布局不同:

從lg調整到md再回到lg后的大屏幕:

盡管擁有相同的DOM結構，我不知道是什么導致了布局上的差異。下面是相關代碼(我使用blade來獲取圖像，所以這只是一個示例代碼):

<div class="mx-auto mt-16 max-w-2xl lg:max-w-none">
    <div class="mx-auto bg-white mt-6 lg:h-[40rem] overflow-hidden">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-6 gap-12">
            <div class="lg:col-span-2" id="myDiv">
                <div class="col-span-1 test">
                    <!-- Image 1 -->
                    <div class="flex justify-center">
                        <x-curator-glider
                            class="h-full"
                            media="{{ $keyHighlightSection2Images[0]['image'] }}"
                            format="webp"
                            loading="lazy"
                            quality="80"
                            width="800"
                        />
                    </div>
                </div>
                <div class="col-span-1">
                    <!-- Image 2 -->
                    <div class="flex justify-center">
                        <x-curator-glider
                            class="h-full"
                            media="{{ $keyHighlightSection2Images[1]['image'] }}"
                            format="webp"
                            loading="lazy"
                            quality="80"
                            width="800"
                        />
                    </div>
                </div>
            </div>
            <div class="col-span-1 lg:col-span-2">
                <!-- Image 3 (middle) -->
                <div class="flex justify-center lg:mt-48">
                    Image goes here
                </div>
            </div>
            <div class="col-span-1">
                <!-- Image 4 -->
                <div class="flex justify-center">
                    Image goes here
                </div>
            </div>
            <div class="col-span-1">
                <!-- Image 5 -->
                <div class="flex justify-center mb-16 lg:mb-0">
                    Image goes here
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // Function to add/remove the div based on screen size
    function adjustDivOnScreenSize() {
        var screenWidth = window.innerWidth || document.documentElement.clientWidth;
        var div = document.getElementById('myDiv');

        if (screenWidth <= 1024) {
            if (div) {
                var parent = div.parentNode;
                while (div.firstChild) {
                    parent.insertBefore(div.firstChild, div);
                }
                parent.removeChild(div);
            }
        } else {
            var parent = div.parentNode;
            var innerHtml = div.innerHTML;
            var newDiv = document.createElement('div');
            newDiv.id = 'myDiv';
            newDiv.className = 'lg:col-span-2'; // Set the appropriate CSS grid class
            newDiv.innerHTML = innerHtml;
            parent.insertBefore(newDiv, div);
            div.remove();
        }
    }


    function test() {
        var screenWidth = window.innerWidth || document.documentElement.clientWidth;

        if (screenWidth > 1024) {
            // Check if the div with id "myDiv" already exists
            var myDiv = document.getElementById('myDiv');

            if (!myDiv) {
                // Get a reference to the div with class "test"
                var testDiv = document.querySelector('.test');

                // Create a new div element for the wrapper
                myDiv = document.createElement('div');
                myDiv.id = 'myDiv';

                // Append the wrapper div to the parent element of the div with class "test"
                testDiv.parentElement.insertBefore(myDiv, testDiv);

                // Move the div with class "test" inside the wrapper div
                myDiv.appendChild(testDiv);
            }
        }
    }

    // Call the function on page load and window resize
    window.addEventListener('load', adjustDivOnScreenSize);
    window.addEventListener('resize', test);
    window.addEventListener('resize', adjustDivOnScreenSize);
</script>