Question

我正在构建一个包含三列的简单网格。如果屏幕较小（或数据较大），我希望中间列移至下一行，而不是通常的行为。

<div class="container">
    <div class="row">
        <div class="col">
            <h2>left</h2>
            Loremipsumdolorsitamet, consecteturadipiscingelit,
            seddoeiusmodtemporincididunt utlaboreetdoloremagnaaliqua.
        </div>
        <div class="col">
            <h2>middle</h2>
            Loremipsumdolorsitamet, consecteturadipiscingelit,
            seddoeiusmodtemporincididunt utlaboreetdoloremagnaaliqua.
        </div>
        <div class="col">
            <h2>right</h2>
            Loremipsumdolorsitamet, consecteturadipiscingelit,
            seddoeiusmodtemporincididunt utlaboreetdoloremagnaaliqua.
        </div>
    </div>
</div>

换句话说，在大屏幕上看起来像这样：

|| left | middle | right ||

但是如果所有三列都不能彼此相邻，我想这样做：

|| left | right ||
||    middle   ||

代替此：

|| left | middle ||
||    right      ||

我认为我可以通过以“错误”的顺序编写它们并添加.order-first和.order-last来做到这一点，但这没什么区别。

我正在使用引导程序版本4.1.3

（编辑）作为奖励，对于非常小的屏幕（或非常大的数据），我希望它们返回原始顺序：

|| left   ||
|| middle ||
|| right  ||

Answer 1

使用ordering classes在较小的屏幕宽度上重新排序...

<div class="container">
    <div class="row">
        <div class="col">
            <h2>left</h2> 
        </div>
        <div class="col order-last order-lg-0">
            <h2>middle</h2> 
        </div>
        <div class="col">
            <h2>right</h2> 
        </div>
    </div>
</div>

https://www.codeply.com/go/MymyDd01KK

要回答已编辑问题中的第二个问题...同样，您将使用排序类通过order-0在最小的xs断点处“重置”顺序。 order-*-0将使用列的自然顺序，在“中间”情况下为2。

<div class="container">
    <div class="row">
        <div class="col-sm">
            <h2>left</h2> 
        </div>
        <div class="col-sm order-0 order-sm-last order-lg-0">
            <h2>middle</h2> 
        </div>
        <div class="col-sm">
            <h2>right</h2> 
        </div>
    </div>
</div>

https://www.codeply.com/go/wZCvHbtW4U

中间列下降的自适应网格设计

1 个答案: