сетка на 768px Не меняется

* { 
  margin: 0; 
  padding: 0; 
  font-size: 10px; 
  box-sizing: border-box; 
} 
 
 
/*-------------------------------------- header ---------------------------- */ 
 
.header-menu-col { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: 40px; 
} 
 
.header-section { 
  background-color: #e9e9e9; 
  position: relative; 
  overflow: hidden; 
} 
 
.header-section .img-bg { 
  background-repeat: no-repeat; 
  opacity: .1; 
  position: absolute; 
  top: 0px; 
  height: 100%; 
} 
 
.header-section .menu ul { 
  display: flex; 
  list-style-type: none; 
} 
 
.header-section .menu ul a { 
  text-decoration: none; 
  padding: 0 15px; 
  color: #191919; 
  font-family: "Montserrat"; 
  font-size: 12px; 
  font-weight: bold; 
  line-height: 24px; 
  text-transform: uppercase; 
} 
 
.header-section .menu ul a:hover { 
  color: #10c9c3; 
} 
 
.header-section .menu ul a.active { 
  color: #10c9c3; 
  letter-spacing: 1.2px; 
} 
 
.caption-header { 
  justify-content: flex-end; 
} 
 
.caption-header h1 { 
  color: #1d1d1d; 
  font-family: "Montserrat"; 
  font-size: 38px; 
  font-weight: bold; 
  line-height: 48px; 
} 
 
.caption-header p { 
  color: #787878; 
  font-family: "Nunito Sans"; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 28px; 
  padding: 25px 0; 
} 
 
.caption-header-row { 
  justify-content: flex-end; 
  margin-top: 150px; 
} 
 
.caption-header-row a { 
  padding: 20px 40px; 
  background-color: #10c9c3; 
  color: #FFF; 
  font-family: "Montserrat"; 
  font-size: 12px; 
  font-weight: 500; 
  line-height: 84px; 
  text-transform: uppercase; 
  letter-spacing: 1.2px; 
  text-decoration: none; 
} 
 
.caption-header-row a:hover { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
} 
 
.header-section .slider { 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  margin: 40px 0 30px; 
} 
 
.header-section .slider div { 
  border: 1px solid black; 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  margin: 0 4px; 
  opacity: .4; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
} 
 
.header-section .slider div.active { 
  background-color: #10c9c3; 
  opacity: .6; 
} 
 
.header-section .slider div:hover { 
  background-color: #10c9c3; 
  opacity: .6; 
} 
 
@media (max-width: 768px) { 
  .menu { 
    display: none; 
  } 
  .caption-header-row { 
    margin-top: 50px; 
  } 
  .header-menu-col { 
    justify-content: center; 
  } 
  .caption-header { 
    text-align: center; 
  } 
} 
 
@media (max-width: 568px) { 
  .header-section .img-bg { 
    overflow: hidden; 
  } 
} 
 
 
/*-------------------------------------- /header ---------------------------- */ 
 
 
/*-------------------------------------- about ---------------------------- */ 
 
.about-section { 
  padding: 50px 0; 
  text-align: center; 
} 
 
.about-section h1 { 
  color: #191919; 
  font-family: Montserrat; 
  font-size: 30px; 
  font-weight: bold; 
  line-height: 60px; 
} 
 
.about-section p { 
  color: #787878; 
  font-family: "Nunito Sans"; 
  font-size: 16px; 
  font-weight: 400; 
  line-height: 24px; 
  padding: 25px 0; 
} 
 
@media (max-width: 768px) { 
  .about-section p { 
    font-size: 14px; 
  } 
} 
 
 
/*-------------------------------------- /about ---------------------------- */ 
 
 
/*-------------------------------------- professional-skills-section ---------------------------- */ 
 
.row-professional-skills { 
  align-items: center; 
} 
 
.professional-skills-section .progress { 
  height: 3px; 
} 
 
.caption-professional-skills h1 { 
  color: #171717; 
  font-family: Montserrat; 
  font-size: 30px; 
  font-weight: bold; 
  line-height: 84px; 
} 
 
.caption-professional-skills p { 
  color: #000000; 
  font-family: Montserrat; 
  font-size: 12px; 
  font-weight: bold; 
  line-height: 30px; 
  text-transform: uppercase; 
} 
 
.professional-skills-section img { 
  width: 100%; 
} 
 
.professional-skills-section .image-block { 
  overflow: hidden; 
} 
 
.professional-skills-section .lock-design { 
  width: 100%; 
} 
 
@media (max-width: 768px) { 
  .row-professional-skills { 
    flex-direction: column-reverse; 
  } 
  .header-section { 
    background-color: red; 
  } 
} 
 
 
/*-------------------------------------- /professional-skills-section ---------------------------- */

<!doctype html> 
<html> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="initial-scale=1" content="width=device-width"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> 
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet"> 
  <link rel="stylesheet" type="text/css" href="style/style.css"> 
 
</head> 
 
<body> 
  <div id="header" class="header-section"> 
    <img src="https://preview.ibb.co/eG0rvc/header_bg.jpg" alt="header_bg" border="0" class="img-bg"> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-xl-12 header-menu-col"> 
          <div class="logo"> 
            <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a> 
          </div> 
          <div class="menu"> 
            <ul> 
              <li class="menu-item"><a class="active" href="#home">home</a></li> 
              <li class="menu-item"><a href="#about">about</a></li> 
              <li class="menu-item"><a href="#work">work</a></li> 
              <li class="menu-item"><a href="#process">process</a></li> 
              <li class="menu-item"><a href="#services">services</a></li> 
              <li class="menu-item"><a href="#testcontact">testcontact</a></li> 
              <li class="menu-item"><a href="#contact">Contact</a></li> 
            </ul> 
          </div> 
          <!-- /============================= /menu =========================== !--> 
        </div> 
        <!-- /============================= /col logo =========================== !--> 
      </div> 
      <div class="row caption-header-row"> 
        <div class="col-sm-12 col-md-6"> 
          <div class="caption-header"> 
            <h1>We Design and Develop</h1> 
            <p>We are a new design studio based in USA. We have over 20 years of combined experience, and know a thing or two about designing websites and mobile apps.</p> 
            <a href="#">contact us</a> 
          </div> 
        </div> 
        <!-- /============================= /col menu =========================== !--> 
      </div> 
      <!-- /============================= /row =========================== !--> 
      <div class="row"> 
        <div class="col"> 
          <div class="slider"> 
            <a href="#"> 
              <div class="active"></div> 
            </a> 
            <a href="#"> 
              <div></div> 
            </a> 
            <a href="#"> 
              <div></div> 
            </a> 
          </div> 
        </div> 
      </div> 
    </div> 
    <!-- /============================= /container =========================== !--> 
  </div> 
  <!-- /============================= /header-section =========================== !--> 
  <div id="about" class="about-section"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-sm-12 col-md-12"> 
          <div class="caption-about"> 
            <h1>Abous us</h1> 
            <p>Divide have don't man wherein air fourth. Own itself make have night won't make.<br> A you under Seed appear which good give. Own give air without fowl moveth dry first<br> heaven fruit, dominion she'd won't very all.</p> 
            <img src="image/signature.png" alt="about us"> 
          </div> 
        </div> 
        <!-- /============================= /col  =========================== !--> 
      </div> 
      <!-- /============================= /row =========================== !--> 
    </div> 
    <!-- /============================= /container =========================== !--> 
  </div> 
  <!-- /============================= /about-section =========================== !--> 
  <div id="professional-skills" class="professional-skills-section"> 
    <div class="container"> 
      <div class="row row-professional-skills"> 
        <div class="col-12 col-sm-12 col-md-6 professional-skills"> 
          <div class="caption-professional-skills"> 
            <h1>Professional Skills</h1> 
            <div class="block-design"> 
              <p>UI/UX Design 75%</p> 
              <div class="progress"> 
                <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
              </div> 
            </div> 
            <div class="block-design"> 
              <p>web development 90%</p> 
              <div class="progress"> 
                <div class="progress-bar bg-info" role="progressbar" style="width: 90%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
              </div> 
            </div> 
            <div class="block-design"> 
              <p>marketing 65%</p> 
              <div class="progress"> 
                <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <!-- /============================= /col  =========================== !--> 
        <div class="col-12 col-sm-12 col-md-6 "> 
          <div class="image-block"> 
            <img src="image/mobile_top.png" alt="mobile_top"> 
          </div> 
        </div> 
      </div> 
      <!-- /============================= /row =========================== !--> 
    </div> 
    <!-- /============================= /container =========================== !--> 
  </div> 
  <!-- /============================= /about-section =========================== !--> 
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> 
</body> 
 
</html>