Bootstrap css：在小屏幕上对齐列

Question

修改 在实现下面接受的答案之后，我有以下内容，这是我在实施任何推/拉策略之前的原始内容。因此问题仍然存在。欢迎任何有助于在小屏幕上实现所需布局的建议。

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|                |         |
|                |         |
|                |         |
|                |         |
|                |         |
-----------------|---------|            
|  Right         |
------------------

我在一个流体容器（容器 - 流体）中的一行中有3列。我一直试图在屏幕尺寸变化上正确对齐它们，但无济于事。

1：右侧边栏

2：左侧边栏

3：主要

它在大屏幕上看起来是什么：

------------------------------------------------
|   Left sidebar  |      Main      |  Right Sidebar |
------------------------------------------------

在较小的屏幕上应该是什么样子：

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|  Right Sidebar |         |
----------------------------

现在的样子：

-----------------------------
|  Left          |  Main    |
|  Sidebar       ------------
|                |  Right   |
|                | sidebar  |
-----------------------------

我尝试了col-sm-push / pull-x和col-xs-push / pull-x的不同组合，但它们都没有产生所需的输出。我不断地在大屏幕上将列重叠在彼此之上，而不是按照预期在较小的屏幕上彼此很好地相互叠加。如何在小屏幕上实现正确的布局？

Answer 1

查看此bootply。我使用容器和面板，因为它们看起来更干净。阅读我使用here的面板和网格。阅读有关隐藏div here的信息：

<div class="container">
<div class="row">
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">left</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">main</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">right</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
</div>

预览大

预览小

首先，你要创建一个包含所有相等宽度列（col-md-4）的行，其中col表示列，md表示何时以屏幕大小（桌面（≥992px））看到宽度，并且最大宽度为12.然后对不同尺寸的屏幕（sm≥768px）执行相同操作，并选择调整大小的面板的宽度。为了以特定分辨率隐藏面板和div，bootstrap使用hidden-SCREENSIZE，因此我们将hidden-xs添加到左侧和右侧面板。