No wrap in boostrap row

Question

I want to make header contains logo and menu.

I maked row and two columns. I used booеstrap classes. When I resize window to smaller, menu jumps under logo (look at my picture). In this moment when screen width is small and menu jumps under logo I wanna make collapse menu, but I dont know how to write it to code:

My HTML code:

<div class="mycontainer container-fluid">
<div class="container">
    <div class="row">
        <div class="logo col-md-4">
        <a href = "/" class = "logo"><img src="/bendikon/wp-content/themes/bendikon/images/logo.png" alt="banner"></a>    
        </div>
        <div class="header-menu col-md-8">
        <?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
        <?php wp_nav_menu( array( 'theme_location' => 'primary-menu') ); ?>
        <?php } else { ?>
              <ul class="sf-menu">
                <li><a href="/">Home</a></li>
                <li><a href="/?page_id=2">Sample Page</a></li>
                <li><a href="/?p=1">Sample post</a></li>
              </ul>
            <?php } ?>
        </div>
        </div>
    </div>
</div>

Answer 1

you can use flex-nowrap like this:

<div class="row flex-nowrap">
    <div class="col"></div>
    <div class="col"></div>
</div>

check it here: Bootstrap 4.0 flex-nowrap

Answer 2

try with the class col-xs-8 and col-xs-4 instead of col-md-8 and col-md-4. Is normal that your columns are displayed as a plain blocks if you don't tell them how behave on xs size.

Also you might want to add the class img-responsive to your logo img tag to limit the maximum width to 100% of the containing column.