Question

我有一个像这样的Bootstrap页面：

<div class="row">
    <div class="col-md-2 col-xs-6">
        A
    </div>
    <div class="col-md-8">
       B
    </div>
    <div class="col-md-2 col-xs-6">
       C
    </div>
</div>

看起来像：

------- 
|A|B|C|
-------

因此，如果我在移动设备上查看它，则显示为：

---
|A|
|B|
|C|
---

我希望将它们显示为：

-----
|A|C|
| B |
-----

A和C各包含一个图像，而B包含文本。

我试过了：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-xs-6">
            1
        </div>
        <div class="col-md-8 col-md-push-8" >
            2
        </div>
        <div class="col-md-2 col-md-pull-2 col-xs-6">
            3
        </div>
    </div>
</div>

但我没有得到理想的结果。我该怎么办？

此致 GenXCoders

Answer 1

你只需要思考＆＃34;移动优先＆＃34; ...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-xs-6">
            A
        </div>
        <div class="col-md-2 col-md-push-8 col-xs-6">
            C
        </div>
        <div class="col-md-8 col-md-pull-2">
            B
        </div>
    </div>
</div>

https://www.codeply.com/go/445bg4bb57

安排3个Bootstrap Cols

1 个答案: