Question

我实际上是使用bootstrap 3来创建一个网站，当我的页面处于移动视图（320px宽度）时，我想在页面底部移动一个左侧栏。有没有可能只用css实现这个目标？我尝试了col-md-push- *但绝对没有用。

以下是代码：

<div> Block A (side bar)</div>
<div> Block B (tiles)</div>
<div> Block B ''</div>
<div> Block B ''</div>
<div> Block B ''</div>

当页面大小为320px时，我想在所有B区块之后移动页面末尾的A区。

有谁知道实现这一目标的方法？

Answer 1

撤消列的顺序，并使用pull-left和pull-right重新定位：

DEMO

<div class="container">
    <div id="content" class="offerList">
        <div class="row clearfix">

            <div class="col-xs-12 col-md-9 column pull-right">
                <!-- Block B -->
                ...

            </div>

            <div id="contactBlock" class="col-xs-12 col-md-3 column pull-left">
                <!-- Block A -->
                ...

            </div>
        </div>
    </div>
</div>

在较大的屏幕尺寸下，这将使块A向左浮动，而块B向右浮动，有效地交换它们在父元素内的位置。当您的列宽度为100％时，在小屏幕尺寸下，这些浮动变得毫无意义（元素不能在另一个元素上“浮动”），并且DOM中元素的顺序将接管。

将左侧边栏移到底部

1 个答案: