响应式双列布局定位

Question

我正在尝试使用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

的链接

Answer 1

col-{size}-pull / col-{size}-push本身，不提供任何尺寸。

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

Answer 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>

Answer 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>

Answer 4

您需要在每个部分添加col-md-6 col-lg-6。这是codepen：http://codepen.io/anon/pen/EjxWZz

以下是代码：

<div class="content">
        <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 col-md-6 col-lg-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 col-md-6 col-lg-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 col-md-6 col-lg-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 col-md-6 col-lg-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 col-md-6 col-lg-6">
                    Attention Banner Section
                </div>
            </div>
        </div>
     </div>
</div>