responsive-design - Bootstrap 3 网格 : Move elements between rows

Question

在学习 Twitter Bootstrap 3 来创建响应式网页时，我遇到了一个问题:
如何将元素从一行向上移动到另一行？我需要 col-md-push/col-md-pull 之类的东西，但用于垂直方向。

例如，在桌面屏幕元素 电话 在第二行，但在平板电脑上它应该在第一行:

桌面:
|一个 |乙| C |
| D | E | F |

药片:
|一个 | D |
|乙| C |
| E | F |

电话:
|一个 |
| D |
|乙|
| E |
| C |
| F |

提前致谢!

Answer 1

使用嵌套列找到了解决方案。 A 和 D 元素组合在一列中。在桌面屏幕 (col-md) 上，它们每列占据 12 列，因此 D 位于 A 下方。在平板电脑屏幕 (col-sm) 上，A 和 D 的大小相同 (6)，因此它们适合一行。

完整代码:http://jsfiddle.net/UNs25/1/

<div class="container">
    <div class="row">       

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="A">
                </div>
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="D">
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="B">
            <input type="text" class="form-control" placeholder="E">            
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="C">
            <input type="text" class="form-control" placeholder="F">            
        </div>      

    </div>      
</div>