行上的引导列

Posted 2021-05-05

我想知道以下是否可行：

在小型设备上，我想要：

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

但在中型+设备上，我想：

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

我试过以下代码：

<div class="row">
    <div class="col-xs-12 col-md-6">A</div>
    <div class="col-xs-12 col-md-12 col-md-push-6">B</div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">C</div>    
</div>

但是B和C不会向上或向下移动，它们只会向左或向右偏移。

我究竟做错了什么？还是不可能？

答案

这将是我认为..

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