How to Reorder Columns with Bootstrap 4?

问题:

I have used the following tags in bootstrap 4 .

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3 col">
                <div class="right-user-account" >
                    <a class="fd-head-login" href="#">
                        <i class="fa fa-caret-down"></i>User Account</a>
                </div>
            </div>

            <div class="col-md-6 text-center col-md-6">
                <a href="#">
                    <img src="images/logo.png">
                </a>
            </div>

            <div class="col-md-3">
                <div class="left-login" >
                    <a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>
                </div>
            </div>
        </div>
    </div>

I want to be in full-width with the logo

How do I work with the reorder command?

回答1:

Bootstrap 4 uses flex/flexbox. So yes you have the option of ordering elements/columns.

I think what you want is using just the Bootstrap-4 classes of order-{number} with your col classes.

Below is the solution:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row align-items-center">
  
    <div class="col-md-3 col order-2 order-sm-1">
      <div class="right-user-account">
        <a class="fd-head-login" href="#">
          <i class="fa fa-caret-down"></i>User Account</a>
      </div>
    </div>
    
    <div class="col-md-6 text-center col-md-6 order-1 order-sm-2">
      <a href="#">
        <img src="images/logo.png">
      </a>
    </div>

    <div class="col-md-3 order-3">
      <div class="left-login">
        <a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>
      </div>
    </div>
    
  </div>
</div>

You can find more here.

Codepen link to playaround screen widths

Hope this answer helps you!

回答2:

You can use reordering option of bootstrap
https://getbootstrap.com/docs/4.0/layout/grid/#reordering