更改从移动设备到桌面布局的列排序

Question

我正在尝试使用网格布局实现以下设计：

这是我尝试的但不是我想要的。

http://jsfiddle.net/tomalex0/3fesK/3/

<div>
   <div class="col-md-9 col-md-push-3 row-one">1</div> 
   <div class="col-md-3 col-md-pull-9 row-two">2</div>
   <div class="col-md-9 col-md-push-3 row-three">3</div>
</div>

我不想使用绝对值来使其工作，因为页脚属于绝对div。

请告诉我是否可能。

Answer 1

<div>
    <div class="col-xs-12 col-sm-9 pull-right">1</div>
    <div class="col-xs-12 col-sm-3 pull-left">2</div>
    <div class="col-xs-12 col-sm-9 pull-right">3</div>
</div>

http://jsfiddle.net/isherwood/28RsL/

Answer 2

这是bootply，展示了您的大部分解决方案。您将需要包含其他视口的案例，以使其适用于所有视口，但大部分都是为您完成的。我所做的是创建名为2的多个容器来构建桌面布局，并将其隐藏为移动布局，反之亦然。

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

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-md-8 col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">1</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-12 hidden-lg">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">2</h3>

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

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