0

I have a row of 3 columns.

logo - search - 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>

On mobile, I want this to change to 2 rows. The first to contain logo and fb login and the second line to include search.

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

Using bootstrap I'd be able to achieve that with push and pull but now with B4 I am not sure how to implement it.

Any ideas on how to implement this using bootstrap 4?

1 Answers1

1

Use the Bootstrap 4 Ordering classes..

<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 makes the 2nd col last on xs, and natural order on sm and up.

Related: Column ordering in Bootstrap 4

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624