响应式两列布局定位答案

【问题标题】：Responsive two-column layout positioning响应式两列布局定位
【发布时间】：2015-05-09 00:54:36
【问题描述】：

我正在尝试使用 bootstrap 3 为桌面和移动屏幕构建响应式布局。在使用 .col-XX-push-X 时我遇到了问题，因为列仍在使用它们的高度空间。

我正在尝试制作这个：

我得到的是：

这是我的相关代码：

<div class="container-fluid">
            <div class="row">
                <div id="campaign-description-section"
                     class="section campaign-description-section col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6">
                    Campaign Description Section
                </div>
                <div id="shirt-styles-section"
                     class="section shirt-styles-section col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6">
                    Shirt Styles Section
                </div>
                <div id="color-size-section"
                     class="section color-size-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                    Color Size Section
                </div>
                <div id="price-section"
                     class="section price-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                    Price Section
                </div>
                <div id="attention-banner"
                     class="section attention-banner col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                    Attention Banner Section
                </div>
            </div>

这是code pen的链接

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

col-{size}-pull / col-{size}-push 本身，不要给出任何大小。

然后将col-md-6 col-lg-6分别添加到前两个部分。

【讨论】：

【解决方案2】：

试试这样：

<div id="shirt-styles-section" class="section shirt-styles-section col-xs-12 col-sm-12 col-md-6 col-lg-6">
   Shirt Styles Section
</div>
<div id="campaign-description-section" class="section campaign-description-section col-xs-12 col-sm-12 col-md-6 col-lg-6">
   Campaign Description Section
</div>

【讨论】：

【解决方案3】：

我从来没有使用过____-pull，所以我尝试了你的想法：

<div class="container-fluid">
        <div class="row">
          <div id="shirt-styles-section"
                 class="section shirt-styles-section col-xs-12 col-sm-6">
                Shirt Styles Section
            </div>
            <div id="campaign-description-section"
                 class="section campaign-description-section col-xs-12 col-sm-6">
                Campaign Description Section
            </div>

            <div id="color-size-section"
                 class="section color-size-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                Color Size Section
            </div>
            <div id="price-section"
                 class="section price-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                Price Section
            </div>
            <div id="attention-banner"
                 class="section attention-banner col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
                Attention Banner Section
            </div>
        </div>
</div>

【讨论】：