行上的引导列 [英] Bootstrap-columns over rows

问题描述

我想知道以下是否可行:

在小型设备上，我想要:

-----|一个 |-----|乙 |-----|C |-----

但在中型+设备上，我想要:

----------|一个||C |----------|乙 |----------

我尝试了以下代码:

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

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

我做错了什么?还是不可能?

解决方案

我认为这会起作用..

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

I'm wondering if the following is possible:

On a small device, I want:

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

But on a medium+ device, I want:

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

I've tried the following code:

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

But B and C won't shift up or down, they only get an offset to the left or right.

What am I doing wrong? Or is it impossible?

解决方案

This will work i think..

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

这篇关于行上的引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！