Bootstrap 网格布局一个框和其他框

Question

我想用 bootstrap（使用 bootstrap 4）安排布局，这样一列在宽屏上与其他列并排排列，在移动设备上它们将彼此重叠，但是与其他列并列的列按顺序排在第二位。我知道如何以最高列位于网格末尾的方式执行此操作（我不希望那样）。以下是示例 result

桌面布局应如下图所示

在移动设备上布局

Answer 1

Bootstrap 4 有针对这种情况的响应浮动。您可以在第二列 pull-*-right 获得更大的（桌面）宽度..

<div class="row">
    <div class="col-md-9">1</div>
    <div class="col-md-3 pull-md-right">2</div>
    <div class="col-md-9">3</div>
    <div class="col-md-9">4</div>
</div>

演示：http://codeply.com/go/N7rGhE72Kr

Bootstrap 网格布局一个框和其他框

Bootstrap grid layout one box along others

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4