Question

我已经看过几个关于如何使用col - * - push-12在引导程序中堆叠coloumn顺序的例子，但你可以用class container-fluid对div进行处理吗？

我有以下HTML：

＆＃13;

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

＆＃13;

如何在小型设备中使用推送类来反转堆栈顺序（将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

更改移动设备的行顺序

1 个答案: