響應式布局案例-1

.container {
            display: flex;
            margin: 0 auto;
            max-width: 800px;
            border: 1px solid black;
        }
        
        .left {
            display: flex;
            background-color: orange;
            margin: 5px;
            width: 200px;
        }
        
        @media(max-width:640px) {
            .left {
                display: none;
            }
        }
        
        .right {
            display: flex;
            flex: 1;
            margin: 5px;
            background-color: blue;
        }
           

<div class="container">
        <div class="left">
            這裡是一些不重要的内容，比如友情連結、廣告等
        </div>
        <div class="right">
            這裡是一些重要的内容，比如一篇文章，文章是整個頁面的核心内容。這裡是一些重要的内容，比如一篇文章，文章是整個頁面的核心内容。這裡是一些重要的内容，比如一篇文章，文章是整個頁面的核心内容。這裡是一些重要的内容，比如一篇文章，文章是整個頁面的核心内容。這裡是一些重要的内容，比如一篇文章，文章是整個頁面的核心内容。
        </div>
    </div>
           

移動端下：

非移動端下：