It's really frustrating for me.
This is my bootstrap4 navbar code, and I've tried so many different approaches to creating two rows without success.
Despite inputting the code above, I keep getting the wrong result. I've attempted various solutions, as shown in picture 1, but none have worked.
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand nav-top" href="<?php echo home_url('/'); ?>">
<img src="<?php echo render_custom_logo_url(); ?>" style="height: 40px;" class="d-inline-block align-top"><span class="pl-1 d-inline-block" style="font-size: 1.5em;">鴻協資訊耗材商城</span>
</a>
<div class="d-flex flex-column flex-wrap">
<ul class="navbar-nav mt-lg-0 d-none d-md-block">
<li class="nav-item d-inline-block mr-2 ml-2">
<a class="nav-link" href="tel:0961588602" role="button"><i class="fas fa-phone pr-1 contact-phone"></i><span class="pr-1"><u>聯絡電話：0961-588602</u></span></a>
</li>
<li class="nav-item d-inline-block mr-2 ml-2">
<a class="nav-link" href="https://line.me/ti/p/iwN_aTYTiR"><i class="fab fa-line contact-line"></i>LINE帳號：pos0961588602</a>
</li>
</ul>
<div>
<div class="order-2 order-md-3">
<ul class="navbar-nav mt-lg-0 mr-auto mr-2 inner d-block d-md-none">
<li class="nav-item d-inline-block mr-2 ml-2">
<a class="nav-link" href="tel:0961588602" role="button"><i class="fas fa-phone pr-1 contact-phone"></i><span class="pr-1"><u>0961-588602</u></span></a>
</li>
<li class="nav-item d-inline-block mr-2 ml-2">
<a class="nav-link" href="https://line.me/ti/p/iwN_aTYTiR"><i class="fab fa-line contact-line"></i></a>
</li>
</ul>
<ul class="navbar-nav mt-lg-0 ml-auto mr-2 inner">
<?php global $woocommerce; ?>
<li class="nav-item d-inline-block mr-2 ml-2">
<a class="nav-link" href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>"><i class="fas fa-shopping-cart"></i><span class="badge badge-danger" style="vertical-align: super;"><?php echo esc_html( $woocommerce->cart->get_cart_contents_count() ); ?></span></a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navitems" aria-controls="main-nav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-md-2" id="main-navitems">
<?php
wp_nav_menu(array(
'menu' => 'main_menu',
'theme_location' => 'main_menu',
'container' => false,
'menu_id' => 'mainMenu',
'menu_class' => 'navbar-nav mt-lg-0 mr-auto ml-2',
'depth' => 2,
'fallback_cb' => 'bs4navwalker::fallback',
'walker' => new bs4Navwalker()
));
?>
<form id="navSearchMobile" class="d-md-none" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input name="s" class="form-control form-control-sm" type="search" placeholder="輸入商品名稱" required>
<span class="input-group-btn">
<button class="btn btn-outline-success btn-sm" type="submit">搜尋</button>
</span>
</div>
</form>
</div>
<form id="navSearch" class="form-inline my-2 my-lg-0 order-md-4 d-none d-md-flex" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input name="s" class="form-control form-control-sm" type="search" placeholder="輸入商品名稱" required>
<span class="input-group-btn">
<button class="btn btn-outline-success btn-sm" type="submit">搜尋</button>
</span>
</div>
</form>
</div>
</div>
</nav>
What should I do to solve this issue?
I simply want to display two rows on a PC like Picture 1, and on mobile like Picture 3.