My bootstrap 4 col-sm-6 rows are not stacking on mobile devices

Question

I'm using Bootstrap 4 and having trouble getting my columns to stack on top of each other in mobile view. I have two col-sm-6 inside each row. I'm sure it's an easy fix, but I can't seem to figure it out. Any help would be appreciated, thanks!

Here's the link to the website https://alex-carver.github.io/Ananomouse/

/*--Overview Header one--*/
h3.overview-header{
	margin-bottom: 5px;
    font-weight: 500;
    font-family: 'OSP-DIN' , sans-serif;
   	font-style: bold;
   	font-size: 60px;
   	letter-spacing: 2px;
   	margin-top: 10px;
   	color: #E7643B ;
}
/*--Overview Header Two--*/
h3.overview-header2{
	margin-bottom: 5px;
    font-weight: 500;
    font-family: 'OSP-DIN' , sans-serif;
   	font-style: bold;
   	font-size: 60px;
   	letter-spacing: 2px;
   	margin-top: 10px;
   	color: #777;
}

/*--Overview Header Three--*/
h3.overview-header3{
	margin-bottom: 5px;
    font-weight: 500;
    font-family: 'OSP-DIN' , sans-serif;
   	font-style: bold;
   	font-size: 60px;
   	letter-spacing: 2px;
   	margin-top: 10px;
   	color: #812E14;
}



/*--Overview Sub Headers--*/
h4{
	font-family: 'Bebas Neue' , sans-serif;
	font-size: 40px;
	color: #9B3718;
	font-weight: 600;
    font-style: normal;
    letter-spacing: 1px;
    margin-bottom:0;
    margin-top: 30px;
}

/*--Overview Paragraphs--*/
p.lead2{
	font-size: 25px;
	color: #333;
	font-weight: bold;
	letter-spacing: 1px;
	font-style: normal;
	font-family: 'Bebas Neue' , sans-serif;
	padding-top: 20px;	
}


/*--Footer Paragraphs--*/
p.lead3{
	font-size: 20px;
	color: #333;
	font-weight: 300;
	letter-spacing: 1px;
	font-style: normal;
	font-family: 'Bebas Neue' , sans-serif;
}


/*--Overview One---*/
section#overview1{
  background: -webkit-linear-gradient(left,#E7643B  50%, #fff 50%);
  background: -o-linear-gradient(left, #E7643B 50%, #fff  50%);
  background: linear-gradient(to right, #E7643B  50%, #fff 50%);
  width: 100%;
  height: 700px;
}

/*--Overview Two---*/
section#overview2{
  background: -webkit-linear-gradient(left, #fff 50%, #777 50%);
  background: -o-linear-gradient(left, #fff 50%, #777 50%);
  background: linear-gradient(to right, #fff 50%, #777 50%);
  width: 100%;
  border-bottom: 2px solid #eee;
  height: 700px;
}

/*--Overview Three---*/
section#overview3{
  background: -webkit-linear-gradient(left, #812E14 50%, #fff 50%)!important;
  background: -o-linear-gradient(left,  #812E14 50%, #fff 50%)!important;
  background: linear-gradient(to right,  #812E14 50%, #fff 50%)!important;
  width: 100%;
  height: 700px;
}

.overview-wrapper{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 650px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Overview Section One -->
<section id="overview1">
  <div class="container-fluid">
    <div class="row justify-content-left">
      <div class=" col-sm-6 overview-wrapper">
        <div class="overview-content">
          <img class="computer1" src="./img/computer1.png" alt="laptop image">
        </div>
      </div>
      <div class=" col-sm-6 overview-wrapper">
         <div class="overview-content2">
            <h3 class="overview-header">Overview Header One</h3><!--Header-->
                <h4>Sub Header</h4><!--sub header-->
              <!-- sub text -->
              <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
              <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>         
        </div>
      </div>
    </div>
  </div><!-- container -->
</section>

<!-- Overview Section 2 -->
<section id="overview2">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-sm-6 text-left overview-wrapper">
         <div class="overview-content2">
            <h3 class="overview-header2">Overview Header Two</h3><!--Header-->
                <h4>Sub Header</h4><!--sub header-->
                   <!-- sub text -->
              <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
        </div>      </div>
      <div class="col-sm-6 text-center overview-wrapper">
         <div class="overview-content">
          <img class="computer1" src="./img/computer2.png" alt="laptop image">
        </div>
      </div>
    </div>
  </div> <!-- container -->
</section>

<!-- Overview Section 3 -->
<section id="overview3">
  <div class="container-fluid">
    <div class="row justify-content-left">
      <div class="col-sm-6 overview-wrapper">
        <div class="overview-content">
          <img class="computer1" src="./img/computer3.png" alt="laptop image">
        </div>
      </div>
      <div class="col-sm-6 overview-wrapper">
         <div class="overview-content2">
            <h3 class="overview-header3">Overview Header Three</h3><!--Header-->
                <h4>Sub Header</h4><!--sub header-->
                  <!-- sub text -->
              <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
        </div>
      </div>
    </div>
  </div><!-- container -->
</section>

Answer 1

Just comment the below code in you css which is unnecessary .overview-wrapper { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; height: 650px; }

and update the col classes from col-sm-6 overview-wrapper to col-md-6 overview-wrapper

and in last update the background color for small devices as well section#overview1 { background: linear-gradient(to bottom, #E7643B 50%, #fff 50%); }

Answer 2

All you need to do in this case to make it responsive is to just add the img-fluid class to the images. That's it!

Edit:

The main reason it wasn't working for you is:

You had too many unnecessary css hacks in there.

Many things that you are trying to do with custom css can be done (and should be done) with native Bootstrap classes alone. Because custom css hacks have the tendency to require even more css hacks to fix the problems caused by the original css hacks...

My recommendation is:

Rip out all of your custom css, use the code from my snippet below as a starting point and then start adding your custom css line by line to see where your custom css breaks Bootstrap. (I could tell you that but I think you'd rather learn it by yourself) Just one hint: Bootstrap 4 is flexbox-based by default. Interfering with that is not a good idea.

Also: You might also want to let Bootstrap re-order some images for small screens (if you want an image to always appear before the text for the corresponding section). But that wasn't part of this question.

Finally, you don't need a separate div for container-fluid. You can add that class directly to your sections and get rid of the divs. Bootstrap classes can be added to any suitable HTML elements such as section, main, nav etc. It doesn't have to a be a div.

Here's the full working code snippet (click the "run code snippet" button below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Overview Section One -->
<section id="overview1">
    <div class="container-fluid">
        <div class="row justify-content-left">
            <div class=" col-sm-6 overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placeimg.com/900/400/tech" alt="laptop image">
                </div>
            </div>
            <div class=" col-sm-6 overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header">Overview Header One</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>         
                </div>
            </div>
        </div>
    </div><!-- container -->
</section>

<!-- Overview Section 2 -->
<section id="overview2">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-6 text-left overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header2">Overview Header Two</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                </div>      </div>
            <div class="col-sm-6 text-center overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placeimg.com/900/400/animals" alt="laptop image">
                </div>
            </div>
        </div>
    </div> <!-- container -->
</section>

<!-- Overview Section 3 -->
<section id="overview3">
    <div class="container-fluid">
        <div class="row justify-content-left">
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content">
                    <img class="computer1 img-fluid" src="https://placeimg.com/900/400/nature" alt="laptop image">
                </div>
            </div>
            <div class="col-sm-6 overview-wrapper">
                <div class="overview-content2">
                    <h3 class="overview-header3">Overview Header Three</h3><!--Header-->
                    <h4>Sub Header</h4><!--sub header-->
                    <!-- sub text -->
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                </div>
            </div>
        </div>
    </div><!-- container -->
</section>

Answer 3

You probably missed the very important meta for responsive stuff:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Besides col-sm-6 (tablet or bigger size), for a good look in mobile you may need col-6

Finally, I don't think you need fixed height for overview elements.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        /*--Overview Header one--*/
        h3.overview-header {
            margin-bottom: 5px;
            font-weight: 500;
            font-family: 'OSP-DIN', sans-serif;
            font-style: bold;
            font-size: 60px;
            letter-spacing: 2px;
            margin-top: 10px;
            color: #E7643B;
        }
        /*--Overview Header Two--*/
        h3.overview-header2 {
            margin-bottom: 5px;
            font-weight: 500;
            font-family: 'OSP-DIN', sans-serif;
            font-style: bold;
            font-size: 60px;
            letter-spacing: 2px;
            margin-top: 10px;
            color: #777;
        }

        /*--Overview Header Three--*/
        h3.overview-header3 {
            margin-bottom: 5px;
            font-weight: 500;
            font-family: 'OSP-DIN', sans-serif;
            font-style: bold;
            font-size: 60px;
            letter-spacing: 2px;
            margin-top: 10px;
            color: #812E14;
        }



        /*--Overview Sub Headers--*/
        h4 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 40px;
            color: #9B3718;
            font-weight: 600;
            font-style: normal;
            letter-spacing: 1px;
            margin-bottom: 0;
            margin-top: 30px;
        }

        /*--Overview Paragraphs--*/
        p.lead2 {
            font-size: 25px;
            color: #333;
            font-weight: bold;
            letter-spacing: 1px;
            font-style: normal;
            font-family: 'Bebas Neue', sans-serif;
            padding-top: 20px;
        }


        /*--Footer Paragraphs--*/
        p.lead3 {
            font-size: 20px;
            color: #333;
            font-weight: 300;
            letter-spacing: 1px;
            font-style: normal;
            font-family: 'Bebas Neue', sans-serif;
        }


        /*--Overview One---*/
        section#overview1 {
            background: -webkit-linear-gradient(left,#E7643B 50%, #fff 50%);
            background: -o-linear-gradient(left, #E7643B 50%, #fff 50%);
            background: linear-gradient(to right, #E7643B 50%, #fff 50%);
            width: 100%;
            /*height: 700px;*/
        }

        /*--Overview Two---*/
        section#overview2 {
            background: -webkit-linear-gradient(left, #fff 50%, #777 50%);
            background: -o-linear-gradient(left, #fff 50%, #777 50%);
            background: linear-gradient(to right, #fff 50%, #777 50%);
            width: 100%;
            border-bottom: 2px solid #eee;
            /*height: 700px;*/
        }

        /*--Overview Three---*/
        section#overview3 {
            background: -webkit-linear-gradient(left, #812E14 50%, #fff 50%) !important;
            background: -o-linear-gradient(left, #812E14 50%, #fff 50%) !important;
            background: linear-gradient(to right, #812E14 50%, #fff 50%) !important;
            width: 100%;
            /*height: 700px;*/
        }

        .overview-wrapper {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
            /*height: 650px;*/
        }
    </style>

</head>
<body>
    <!-- Overview Section One -->
    <section id="overview1">
        <div class="container-fluid">
            <div class="row justify-content-left">
                <div class="col-6 col-sm-6 overview-wrapper">
                    <div class="overview-content">
                        <img class="computer1" src="./img/computer1.png" alt="laptop image">
                    </div>
                </div>
                <div class="col-6 col-sm-6 overview-wrapper">
                    <div class="overview-content2">
                        <h3 class="overview-header">Overview Header One</h3><!--Header-->
                        <h4>Sub Header</h4><!--sub header-->
                        <!-- sub text -->
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    </div>
                </div>
            </div>
        </div><!-- container -->
    </section>

    <!-- Overview Section 2 -->
    <section id="overview2">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-6 col-sm-6 text-left overview-wrapper">
                    <div class="overview-content2">
                        <h3 class="overview-header2">Overview Header Two</h3><!--Header-->
                        <h4>Sub Header</h4><!--sub header-->
                        <!-- sub text -->
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    </div>
                </div>
                <div class="col-6 col-sm-6 text-center overview-wrapper">
                    <div class="overview-content">
                        <img class="computer1" src="./img/computer2.png" alt="laptop image">
                    </div>
                </div>
            </div>
        </div> <!-- container -->
    </section>

    <!-- Overview Section 3 -->
    <section id="overview3">
        <div class="container-fluid">
            <div class="row justify-content-left">
                <div class="col-6 col-sm-6 overview-wrapper">
                    <div class="overview-content">
                        <img class="computer1" src="./img/computer3.png" alt="laptop image">
                    </div>
                </div>
                <div class="col-6 col-sm-6 overview-wrapper">
                    <div class="overview-content2">
                        <h3 class="overview-header3">Overview Header Three</h3><!--Header-->
                        <h4>Sub Header</h4><!--sub header-->
                        <!-- sub text -->
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                        <p class="lead2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim cursus, sagittis turpis a, congue leo. Morbi sed leo consectetur, auctor nisl vitae, sodales nunc.</p>
                    </div>
                </div>
            </div>
        </div><!-- container -->
    </section>
</body>
</html>