移动端Bootstrap两列布局不响应问题：如何实现列堆叠适配？

1. 修复两列的响应式适配 #

Bootstrap栅格系统需要给row下的每一列添加响应式列类，才能实现不同屏幕尺寸的布局切换。你仅定义了row但缺少列的响应式配置，这是布局无响应性的核心原因。

正确写法需为每列添加col-*类，示例如下：

<div class="container mt-4">
    <div class="row">
        <!-- 左侧列：移动端占满宽度，中等屏幕及以上占50%宽度 -->
        <div class="col-12 col-md-6">
            <!-- 左侧内容区域 -->
        </div>
        <!-- 右侧列：移动端自动换行到下方，中等屏幕及以上占50%宽度 -->
        <div class="col-12 col-md-6">
            <!-- 右侧内容区域 -->
        </div>
    </div>
</div>

• col-12：针对超小屏幕（<576px，移动端），列占满12格（100%宽度），自动换行到下一行。
• col-md-6：针对**中等屏幕（≥768px）**及以上，每列占6格（50%宽度），保持两列并排。

2. 修复Select与按钮的并排布局 #

你当前的input-group写法不符合Bootstrap 4+规范，input-group-addon已被弃用，会导致移动端布局错乱。需改用input-group-append包裹按钮：

<div class="input-group">
    <select class="form-control" aria-label="Default select example" id="selection-object" name="selection-object" onchange="changeText(this);">
        <option value="select">Select an element</option>
        {% for element in elements %}
            <option value='{{ element.content }}'>{{ element | string }}</option>
        {% endfor %}
    </select>
    <div class="input-group-append">
        <button type="submit" id="modify_btn" class="btn btn-primary">Modify</button>
    </div>
</div>

• 移除mb-3类：input-group内部组件无需额外底部间距，避免布局冗余。
• 用input-group-append替代旧类：确保按钮与select在所有屏幕尺寸下正确并排，无错位问题。

完整示例代码 #

将两处修复结合后的完整代码：

<div class="container mt-4">
    <div class="row">
        <div class="col-12 col-md-6">
            <p>左侧列内容</p>
        </div>
        <div class="col-12 col-md-6">
            <div class="input-group">
                <select class="form-control" aria-label="Default select example" id="selection-object" name="selection-object" onchange="changeText(this);">
                    <option value="select">Select an element</option>
                    {% for element in elements %}
                        <option value='{{ element.content }}'>{{ element | string }}</option>
                    {% endfor %}
                </select>
                <div class="input-group-append">
                    <button type="submit" id="modify_btn" class="btn btn-primary">Modify</button>
                </div>
            </div>
        </div>
    </div>
</div>

调整后，移动端下右侧列会自动排列到左侧列下方，同时Select与按钮的并排布局也能在全尺寸屏幕下正常显示。

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