Адаптивный дизайн сетки с опусканием средней колонны

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

Используйте классы заказа , чтобы изменить порядок на меньших экранах ...

<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

Чтобы ответить на второй вопрос в отредактированном вопросе ... Опять же, вы должны использовать классы упорядочения, чтобы «сбросить» порядок на самой маленькой точке останова xs с помощью order-0. 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