Why 2 col-12 divs do not wrap in Bootstrap 4?

Question

Two Bootstrap 4 cards with col-12 class are placed side-by-side and don't wrap, why??

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-12 font header">
            i am header
        </div>
        <div class="col-sm-12 justify-content-center d-flex">
            <div class="card col-sm-12 text-center w-75 mt-2">
                <div class="card-body d-flex justify-content-center ">

                    <input placeholder="Enter the link or search phrase" id="search" type="text" class="form-coltrol col-7">
                    <button id="download" class="font btn btn-primary">
                        search
                    </button>
                </div>
            </div>
            <div class="card col-sm-12 text-center w-75 mt-2" style="background:silver">
                <div class="variants card-body d-flex justify-content-center ">
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">

            </div>
        </div>
        <div class="col-sm-12 footer"></div>
    </div>
</div>

also available at https://codepen.io/zzmaster/pen/gNEoaK

Answer 1

You are wrapping way to much classes here, you can remove a bunch of stuff here and basically restructure it:

<div class="container">
    <header>
       <!-- header can be seperated -->
       <div class="row">
        <div class="col-12 font header">
            i am header
         </div>
       </div>
    </header>


     <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body ">

                    <input placeholder="Enter the link or search phrase" id="search" type="text" class="form-coltrol col-7">
                    <button id="download" class="font btn btn-primary">
                        search
                    </button>
                </div>
            </div>
            <div class="card" style="background:silver">
                <div class="variants card-body d-flex justify-content-center ">
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">

            </div>
        </div>
        <div class="col-sm-12 footer"></div>
    </div>
</div>

Try to expand from this markup on. Take note that i bascially removed most of the col- classes, they should really only be used directly after "row". And if you use w-75 you shouldn't use col classes. You also should keep cards inside of columns and not define column and card in one element.