Question

大家好，'快乐'复活节。

我正在设置我的引导程序。当我在电脑屏幕和ipad上时，布局很好。但是当我最小化移动尺寸时，“左面板”是第一个出现的。我希望将其置于'右侧面板'之下

有人知道我该怎么做吗？

<?php
if( !isset( $_SESSION ) ) session_start();
?>
<?php include dirname(dirname(__DIR__)).'/resources/includes/header.html'; ?>

<div class="row" style="border: 2px solid blue; height: 100vh;">
    <div class="col-md-2" style="border: 2px solid red; height: 100%;">
        Left Sidenpanel

    </div>
    <div class="col-md-8" style="border: 2px solid red;height: 100%;">
        Left Sidepanel button
        <div class="row" style="border: 2px solid green;height: 20vh;">
            <div class="col-md-12">
            Insert
            </div>      
        </div>
        <div class="row" style="border: 2px solid green;height: 60vh;">
            <div class="col-md-12">
                <div class="row" style="border: 2px solid green">
                    <div class="col-md-1" style="border: 2px solid purple; height: 100%;">
                        Latest
                    </div>                      
                    <div class="col-md-8" style="border: 2px solid purple;height: 100%;">
                        Some Content
                    </div>  
                    <div class="col-md-1" style="border: 2px solid purple; height: 100%;">
                        Right 1
                    </div>
                    <div class="col-md-1" style="border: 2px solid purple; height: 100%;">
                        Right 2
                    </div>  
                    <div class="col-md-1" style="border: 2px solid purple; height: 100%;">
                        Right 3
                    </div>                          
                </div>
            </div>      
        </div>
        <div class="row" style="border: 2px solid black;height: 15vh;">
            <div class="col-md-12">
                <div class="col-md-3" style="border: 2px solid purple; height: 100%;">
                    1
                </div>
                <div class="col-md-3" style="border: 2px solid purple; height: 100%;">
                    2
                </div>
                <div class="col-md-3" style="border: 2px solid purple; height: 100%;">
                    3
                </div>
                <div class="col-md-3" style="border: 2px solid purple; height: 100%;">
                    4
                </div>

            </div>      
        </div>
    </div>
    <div class="col-md-2" style="border: 2px solid red;height: 100%;">
        Right Sidepanel
    </div>
    <div class="col-md-12" style="border: 2px solid red;height: 100%;">
        <?php include dirname(dirname(__DIR__)).'/resources/includes/footer.html'; ?>
    </div>
</div>

Answer 1

创建课程时，添加＆＃34; col-sm- *（您想要的表格位置＆＃34;）。 Sm适用于智能手机！ Md用于中间显示，Lg用于大显示。

移动屏幕上的自举订单

1 个答案: