Адаптивный макет с начальной загрузкой 4 (толкать и тянуть)

Question

У меня есть ряд из 3 столбцов.

logo - поиск - fb login

        <div class="row col my-auto">
            <div id="logo" class="col-auto">
                <a href="./index.html">
                    <img src="images/logo.png" alt="ppissis logo"/>
                </a>
            </div>
            <div id="search" class="col-7">
                (...input)
            </div>
            <div id="fb" class="col-1 ml-auto">
                <img src="images/fb_login.png" alt="FB login" height="40"/>
            </div>
        </div>

На мобильном устройстве я хочу изменить это на 2 строки. Первая содержит логотип и логин fb, а вторая - поиск.

logo(upper-left) fb-login(upper-right)
search(whole line)

С помощью начальной загрузки я смог бы добиться этого с помощью push и pull, но теперь с B4 я не уверен, как это реализовать.

Любые идеи о том, как реализовать это с помощью начальной загрузки 4?

Answer 1

Используйте Bootstrap 4 Классы заказа ..

<div class="container">
    <div class="row">
        <div id="logo" class="col-auto">
            <a href="#l">
                <img src="//placehold.it/100x40" alt="ppissis logo">
            </a>
        </div>
        <div id="search" class="col-sm-7 order-last order-sm-0">
            <input type="text" class="form-control" placeholder="">
        </div>
        <div id="fb" class="col-auto col-sm-1 ml-auto">
            <img src="//placehold.it/40x40?text=FB" alt="FB login" height="40">
        </div>
    </div>
</div>

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

order-last order-sm-0 делает второй столбец последним на xs, а естественный порядок на sm и выше.

---

Похожие: Порядок столбцов в Bootstrap 4