Question

我有两排四口井。这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-8 well">
            <h1>1</h1>
        </div>
        <div class="col-md-4 well">
            <h1>3</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 well">
            <h1>2</h1>
        </div>
        <div class="col-md-4 well">
            <h1>4</h1>
        </div>
    </div>
</div>

这是bootply：http://bootply.com/100389

现在，我们可以看到：

|  1  | 3 |
|-----|---|
|  2  | 4 |

在移动设备中，顺序为1然后是3然后是2，然后是4。

但是，我想要的是顺序应该是1,2,3然后4.我该怎么做？

Answer 1

你可以这样做......

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="well"><h1>1</h1></div>
            <div class="well"><h1>2</h1></div>
        </div>
        <div class="col-md-4">
            <div class="well"><h1>3</h1></div>
            <div class="well"><h1>4</h1></div>
        </div>
    </div>
</div>

Answer 2

如果您希望保持相同的布局，将列并排而不是列在彼此之上，请尝试将col-sm-*和col-xs-*添加到每个列div ，

<div class="container">
    <div class="row">
        <div class="col-xs-8 well">
            <h1>1</h1>
        </div>
        <div class="col-xs-4 well">
            <h1>3</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 well">
            <h1>2</h1>
        </div>
        <div class="col-xs-4 well">
            <h1>4</h1>
        </div>
    </div>
</div>

在Bootstrap中折叠优先级

2 个答案: