如何在Bootstrap中实现跨设备列布局调整与顺序重排？

不需要复制表单元素，利用Bootstrap的响应式列宽和order排序类就能实现需求，既保证桌面端布局不变，又能让移动端按指定顺序显示。

核心思路 #

将三个独立区块（Photo Consent、Organisation Details、Images）都作为row的直接子元素，通过以下类控制布局：

• 用col-12 col-lg-*设置不同屏幕下的列宽：桌面端（lg及以上）Organisation Details占7列，另外两个区块各占5列；移动端占满整行。
• 用order-*（移动端）和默认顺序（桌面端）控制显示顺序：移动端强制Photo Consent排最前，Organisation Details中间，Images最后；桌面端保持原布局的左右结构。

修改后的代码 #

<div class="row">
    <!-- Photo Consent 区块 - 移动端排第1，桌面端占右侧5列 -->
    <div class="col-12 col-lg-5 order-1 order-lg-2">
        <div class="card card-body mb-3">
            <h3 class="text-center"><a href="consent">Photo Consent</a></h3>
            <div class="form-group mb-3">
                <label for="consent">Can we take photos and videos of this organisation?</label>
                <select class="form-control style-by-value" name="consent" id="consent" required>
                    <option value="">-- Please Select --</option>
                    <option value="1">No</option>
                    <option value="2">Yes, but...</option>
                    <option value="3">Yes</option>
                </select>
            </div>
            <small>Consent type updated from web order</small>
        </div>
    </div>

    <!-- Organisation Details 区块 - 移动端排第2，桌面端占左侧7列 -->
    <div class="col-12 col-lg-7 order-2 order-lg-1">
        <div class="card card-body mb-3">
            <h3 class="text-center">Organisation Details</h3>
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="form-group mb-3">
                        <label class="form-label" for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Name" maxlength="255" required />
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="form-group mb-3">
                        <label class="form-label" for="slug">URL Slug</label>
                        <input type="text" class="form-control" id="slug" name="slug" placeholder="URL Slug" maxlength="300" />
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <colour-picker title="Primary Colour" name="primary" value="#000000"></colour-picker>
                </div>
                <div class="col-12 col-lg-6">
                    <colour-picker title="Secondary Colour" name="secondary" value="#FFFFFF"></colour-picker>
                </div>
            </div>
            <div class="form-group mb-3">
                <label class="form-label" for="description">Description</label>
                <textarea rows="7" id="description" class="form-control" name="description" placeholder="Description" ></textarea>
            </div>
        </div>
    </div>

    <!-- Images 区块 - 移动端排第3，桌面端占右侧5列 -->
    <div class="col-12 col-lg-5 order-3 order-lg-3">
        <div class="card card-body mb-3">
            <h3 class="text-center">Images</h3>
            <div class="alert alert-danger text-center">File uploads are currently unavailable</div>
        </div>
    </div>
</div>

代码说明 #

• order-1/order-2/order-3：控制**移动端（lg以下）**的显示顺序，确保Photo Consent在最前。
• order-lg-1/order-lg-2/order-lg-3：控制**桌面端（lg及以上）**的顺序，让Organisation Details在左侧，另外两个区块在右侧上下排列，和原布局一致。
• col-lg-7/col-lg-5：保证桌面端的列宽比例和原布局相同。

这种方案不需要复制表单元素，避免了重复name属性导致的表单提交问题，完全基于Bootstrap原生类实现，代码简洁易维护。

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