Menu
I have used the following tags in bootstrap 4 .
<div class="container">
<div class="row align-items-center">
<div class="col-md-3">
<div class="right-user-account" >
<a href="#">User Account</a>
</div>
</div>
<div class="col-md-6">
<img src="images/logo.png">
</div>
<div class="col-md-3">
<div class="left-login" >
<a href="#">Login</a>
</div>
</div>
</div>
</div>
I want to be in full-width with the logo
How do I work with the reorder command?
436
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...
We can easily change the order of built-in grid columns with push and pull column classes. The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.
You can order the elements using a flex container. The outer div is set to "display: flex;" and the inside elements get given an order. By giving element B an order of 1, and element A an order 2. Element B will be placed before A even though A is first in the code.
Try using col-lg-push and col-lg-pull to reorder the columns in large screens and display the sidebar on the left and main content on the right.
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!
121
You can use reordering option of bootstrap
https://getbootstrap.com/docs/4.0/layout/grid/#reordering
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
