如何在大屏与小屏上精准调整图文布局及元素顺序？

需求描述 #

需实现两种布局效果：

• 大屏：标题位于右侧上方，左侧两列排列服务项（图片+文字），右侧下方为描述段落
• 小屏：标题置顶，服务项按「图片+文字」顺序纵向排列，描述段落放在最后

此前尝试Grid布局和Bootstrap行布局，大屏效果达标但小屏表现不佳，核心问题是无法根据屏幕尺寸调整元素顺序。

你的两次尝试代码 #

尝试1：Grid容器+Grid项 #

<div class="services section background-white">
    <div class="grid-container">
        <div class="grid-item titre">
            <h2 class="services">Nos services</h2>
        </div>
        <div class="grid-item img1">
            <img >
        </div>
        <div class="grid-item text1">
            Cours particuliers
        </div>
        <div class="grid-item img2">
            <img>
        </div>
        <div class="grid-item text2">
            Cours en groupe
        </div>
        <div class="grid-item img3">
            <img >
        </div>
        <div class="grid-item text3">
            Ballade organisée
        </div>
        <div class="grid-item img4">
            <img >
        </div>
        <div class="grid-item text4">
            Conférence en ligne
        </div>
        <div class="grid-item para">
            <p>
                Nous proposons des cours particuliers et des cours en groupe pour répondre à vos besoins spécifiques. Que vous souhaitiez éduquer votre chiot, résoudre des problèmes de comportement ou simplement renforcer votre lien avec votre animal, nous avons la solution pour vous.
            </p>
        </div>
    </div>
</div>

.grid-container{
    display: grid;
}

.titre{
    grid-column: 3 ;
    grid-row: 1;
}

h2.services{
    color: #000 !important;
    font-weight: bold;
    margin-bottom: 5%;
    text-align: center;
    margin-top: 3%;
}

.text1, .text2, .text3, .text4{
    font-weight: bolder;
    font-size: 25px;
    margin-top: 2%;
    margin-bottom: 10%;
}

.img1, .img2, .img3, .img4{
    max-width: 70%;
}

.img1{
    grid-column: 1 ;
    grid-row: 1;
    margin-top: 5%;
}

.text1{
    grid-column: 1 ;
    grid-row: 2;
}

.img2{
    grid-column: 2 ;
    grid-row: 1;
    margin-top: 5%;
}

.text2{
    grid-column: 2 ;
    grid-row: 2;
}

.img3{
    grid-column: 1 ;
    grid-row: 3;
}

.text3{
    grid-column: 1 ;
    grid-row: 4;
}

.img4{
    grid-column: 2 ;
    grid-row: 3;
}

.text4{
    grid-column: 2 ;
    grid-row: 4;
}

.para{
    grid-column: 3 ;
    grid-row: 2 / 4;
    font-size: 20px !important;
}

尝试2：Bootstrap Row-cols布局 #

<div class="services section background-white">
    <div class="row container">
        <div class="col-4 col-sm-5 img1">
            <img >
        </div>
        <div class="col-4 col-sm-5 img2">
            <img>
        </div>
        <div class="col-4 col-sm-12 titre">
            <h2 class="services">Nos services</h2>
        </div>

        <div class=" col-4 col-sm-5 text1">
            Cours particuliers
        </div>
        <div class="col-4 col-sm-5  text2">
            Cours en groupe
        </div>
        <div class="col-4  col-sm-10 offset-sm-1 para">
            <p>
                Nous proposons des cours particuliers et des cours en groupe pour répondre à vos besoins spécifiques. Que vous souhaitiez éduquer votre chiot, résoudre des problèmes de comportement ou simplement renforcer votre lien avec votre animal, nous avons la solution pour vous.
            </p>
        </div>

        <div class="col-4 col-sm-4 img3">
            <img >
        </div>
        <div class="col-4 col-sm-4 img4">
            <img src="https://animal-mon-ami.fr/wp-content/uploads/2021/04/11838925_957959547579454_2043616677968916251_o-300x199.jpg" >
        </div>
        <div class="col-4 col-sm-4"></div>

        <div class="col-4 col-sm-4 text3">
            Ballade organisée
        </div>
        
        <div class="col-4 col-sm-4 text4">
            Conférence en ligne
        </div>
    </div>
</div>

解决方案 #

方案1：CSS Grid + 媒体查询 #

利用Grid的order属性和媒体查询，直接定义不同屏幕下的元素顺序和布局：

优化后CSS代码

/* 大屏基础布局（≥768px） */
.grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.titre{
    grid-column: 3;
    grid-row: 1;
    text-align: center;
}

h2.services{
    color: #000;
    font-weight: bold;
    margin: 3% 0 5%;
}

.text1, .text2, .text3, .text4{
    font-weight: bolder;
    font-size: 25px;
    margin: 2% 0 10%;
    text-align: center;
}

.img1, .img2, .img3, .img4{
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* 大屏元素位置 */
.img1{ grid-column: 1; grid-row: 1; margin-top: 5%; }
.text1{ grid-column: 1; grid-row: 2; }
.img2{ grid-column: 2; grid-row: 1; margin-top: 5%; }
.text2{ grid-column: 2; grid-row: 2; }
.img3{ grid-column: 1; grid-row: 3; }
.text3{ grid-column: 1; grid-row: 4; }
.img4{ grid-column: 2; grid-row: 3; }
.text4{ grid-column: 2; grid-row: 4; }
.para{ grid-column: 3; grid-row: 2 / span 3; font-size: 20px; }

/* 小屏响应式调整（<768px） */
@media (max-width: 767px) {
    .grid-container{
        grid-template-columns: 1fr;
    }

    /* 重新定义元素顺序 */
    .titre{ grid-column: 1; grid-row: 1; order: 1; }
    .img1{ grid-column: 1; grid-row: 2; order: 2; }
    .text1{ grid-column: 1; grid-row: 3; order: 3; }
    .img2{ grid-column: 1; grid-row: 4; order: 4; }
    .text2{ grid-column: 1; grid-row: 5; order: 5; }
    .img3{ grid-column: 1; grid-row: 6; order: 6; }
    .text3{ grid-column: 1; grid-row: 7; order: 7; }
    .img4{ grid-column: 1; grid-row: 8; order: 8; }
    .text4{ grid-column: 1; grid-row: 9; order: 9; }
    .para{ grid-column: 1; grid-row: 10; order: 10; }

    /* 小屏样式适配 */
    h2.services{ margin: 5% 0; }
    .text1, .text2, .text3, .text4{ margin: 3% 0 8%; }
}

方案2：Bootstrap + Order类 #

利用Bootstrap内置的order-*系列类，直接控制不同屏幕下的元素顺序：

优化后HTML结构

<div class="services section background-white">
    <div class="container">
        <div class="row">
            <!-- 标题：小屏排第1，大屏排右侧 -->
            <div class="col-sm-12 titre order-1 order-sm-10">
                <h2 class="services">Nos services</h2>
            </div>

            <!-- 服务1 -->
            <div class="col-sm-5 img1 order-2 order-sm-1">
                <img src="你的图片地址" alt="服务1">
            </div>
            <div class="col-sm-5 text1 order-3 order-sm-2">
                Cours particuliers
            </div>

            <!-- 服务2 -->
            <div class="col-sm-5 img2 order-4 order-sm-3">
                <img src="你的图片地址" alt="服务2">
            </div>
            <div class="col-sm-5 text2 order-5 order-sm-4">
                Cours en groupe
            </div>

            <!-- 服务3 -->
            <div class="col-sm-4 img3 order-6 order-sm-5">
                <img src="你的图片地址" alt="服务3">
            </div>
            <div class="col-sm-4 text3 order-7 order-sm-6">
                Ballade organisée
            </div>

            <!-- 服务4 -->
            <div class="col-sm-4 img4 order-8 order-sm-7">
                <img src="你的图片地址" alt="服务4">
            </div>
            <div class="col-sm-4 text4 order-9 order-sm-8">
                Conférence en ligne
            </div>

            <!-- 描述段落：小屏排最后，大屏排右侧 -->
            <div class="col-sm-10 offset-sm-1 para order-10 order-sm-9">
                <p>
                    Nous proposons des cours particuliers et des cours en groupe pour répondre à vos besoins spécifiques. Que vous souhaitiez éduquer votre chiot, résoudre des problèmes de comportement ou simplement renforcer votre lien avec votre animal, nous avons la solution pour vous.
                </p>
            </div>
        </div>
    </div>
</div>

核心逻辑 #

两种方案的核心都是通过媒体查询判断屏幕尺寸，再用以下方式调整元素顺序：

• Grid布局：使用order属性或重新指定grid-row/grid-column
• Flex/Bootstrap：使用order属性（Bootstrap封装为order-*类）

通过这种方式，既能保证大屏布局符合预期，小屏也能按需求重新排列元素顺序。

内容的提问来源于stack exchange，提问作者AntoineXVI