jquery - 更改移动设备的行顺序

Question

我看过几个关于如何使用 col-*-push-12 在 bootstrap 中堆叠列顺序的示例，但是您可以对类 container-fluid 的 div 执行此操作吗？

我有以下 HTML:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
            ...
            </div>
            <div class="col-md-6 col-sm-12">
            ...
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
            ...
            </div>
            <div class="col-md-8">
            ...
            </div>
        </div>
    </div>
</div>

如何使用推送类在小型设备中反转堆栈顺序(将 mydiv2 向上移动，将 mydiv1 向下移动)？

Answer 1

当然，Bootstrap push、pull 类在 container-fluid 中工作..

<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-push-6 col-sm-12">
            1
            </div>
            <div class="col-md-6 col-md-pull-6 col-sm-12">
            2
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
            1
            </div>
            <div class="col-md-8 col-md-pull-4">
            2
            </div>
        </div>
    </div>
</div>

Demo on Codeply