Bootstrap inline not stacking correctly - html

Question

I've looked at the other bootstrap posts, but I still can't seem to figure out why my code won't work. Here's where I'm at. Any help is greatly appreciated as I've been working on this for days...
If I'm using grid shouldn't it just stack?
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
</div>
<!-- end custom logo -->
<div class="row">
<div class="col-md-6">
<p class="text-right">Call Now</br>
636-244-4444</p>
</div>
</div>
</div>

Answer 1

You should place site logo and Call now section inside one .row element to make it inline with other. If 2 sections is in 2 different .row, it cannot same line.
See more about Bootstrap grid here (because Bootstrap 3 documentation is better explain your problem): https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6">
<p class="text-right">Call Now</br>
636-244-4444</p>
</div>
</div> <!-- end row (one line) here -->