A big greeting to the whole community:
Just starting with Bootstrap, I'm making a website, but I realize that the website is not the most appropriate version in sm, in a good desktop version, but when I reduce the window it gets out of order, I had an idea initial and it was these three sections making them parrallax, in spite of the complexity, it decides to leave it static, but desacomoda < < Attached an image to make me understand better what happens to me and the code > >
Thank you very much for helping me find my mistake.
.logo {
}
@media (max-width: 575px) {
.logo {
width: 50%;
}
}
/*HEADER*/
header a img:hover {
opacity: 0.3;
filter: alpha(opacity=30)
}
/*MENU*/
.navbar {
margin-bottom: 0;
background-color: #1A1A1A;
border: 0;
font-size: 14px !important;
border-radius: 0;
font-family: 'Open Sans', sans-serif;
justify-content: space-between;
align-items: center;
position: relative;
display: flex;
flex-wrap: wrap
padding: .10rem 1rem;
}
.navbar li a, .navbar .navbar-brand {
color: #B3B3B3 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #FFF !important;
background-color: #ED1E79 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:5px !important;
height: 35px; /* aqui escoges el alto que necesites */
margin-left: 50px;
margin-right: 50px;
}
.navbar {
min-height:32px !important; /* aqui escoges el alto que necesites */
}
/*FOOTER*/
footer {
background-color:#1A1A1A;
height: 50%;
color: white;
padding: 15px;
}
.main1 {
display:flex;
margin:0 auto;
}
footer img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
footer img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
@media (min-width: 1200px) {
.custom-text1 {
text-align: left;
}
}
@media (max-width: 1199px) {
.custom-text1 {
text-align: center;
}
}
@media (min-width: 1200px) {
.custom-text {
text-align: right;
}
}
@media (max-width: 1199px) {
.custom-text {
text-align: center;
}
}
/*TEXTO*/
h1 {
font-family: 'Open Sans 300', sans-serif;
font-size: 25px;
}
h2 {
font-family: 'Open Sans 400', sans-serif;
font-size: 25px;
}
h3 {
font-family: 'Open Sans 700', sans-serif;
font-size: 25px;
}
h4 {
font-family: 'Open Sans Condensed 300', sans-serif;
font-size: 18px;
line-height: 1.42857143 !important;
}
h6{
line-height: 1.42857143 !important;
}
.novedades {
margin-top: 60px;
margin-bottom:60px;
}
/* PARALLAX */
.nosotros{
background: no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
height: 600px;
}
.texto-nosotros {
margin-top: 200px;
}
.caja-nosotros {
width: 100%;
height:inherit;
padding: 50px;
border: 1px solid black;
box-sizing: border-box;
}
/*TRABAJO*/
.equipo-trabajo {
margin-top: 100px;
margin-bottom: 100px;
}
.servicios {
margin-top: 100px;
margin-bottom: 100px;
}
.tabla-servicios {
margin-bottom: 100px;
}
/*CONTACTO*/
.formulario {
margin-top: 100px;
margin-bottom: 100px;
}
.input-border {
border-color: #ED1E79 ;
}
.boton-enviar {
margin-top: 50px;
}
.donde-estamos{
margin-top: 150px;
margin-bottom: 200px;
}
.caja{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
font-weight: 400;
width:400px;
border: 1px solid #000;
padding: 20px;
justify-content: center;
}
#redes a img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
} 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="imagenes/favicon.png" type="image/x-icon">
<title>Nosostros</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- HEADER -->
<header>
<div class="container">
<a href="index.html">
<img class="center-block logo" src="imagenes/Logo.png">
</a>
</div>
</header>
<!-- MENU -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">INICIO</a></li>
<li><a href="nosotros.html">NOSOTROS</a></li>
<li><a href="servicios.html">SERVICIOS</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<!--VIDEO NOSOTROS-->
<div class="row">
<div class="container-fluid">
<video controls poster="imagenes/v-nosotros.jpg" src="Videos/v_nosotros.mp4"/>Your browser does not support the video tag.</video>
</div>
</div>
<!--SECCIÓN ACERCA DE NOSOTROS-->
<div class="row">
<div class="nosotros hidden-xs" style="background-image: url(imagenes/parallax.png); background-size: 100%;">
<div class="col-md-8 col-md-offset-2">
<div class="texto-nosotros">
<h1 class="text-center"><b>ACERCA DE</b> “JOSÉ MIGUEL, ARTE Y BELLEZA”</h1><br>
<div class="caja-nosotros">
<p>Durante más de 15 años de profesionalismo, experiencia y servicios, José Miguel Sanchez Gonzalez, tenia la
... la que se ofrecen productos y servicios de gran calidad a precios apropiados.</p>
</div>
</div>
</div>
</div>
</div>
<!-- EQUIPO DE TRABAJO -->
<div class="container">
<div class="equipo-trabajo">
<div class="row">
<h1 class="text-center"><b>EQUIPO</b> DE TRABAJO</h1><br><br>
<div class="col-md-2"></div>
<div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/josemiguel.png"><br><br><h4 style="text-align:center"><b>José Miguel</b></br>Estilista Integral</h4></div>
<div class="col-sm-3"><img class="img-responsive center-block" src="imagenes/normal/luciajaimes.png"><br><br><h4 style="text-align:center"><b>Lucia Jaimes</b></br>Estilista Integral</h4></div>
<div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/nataliatorres.png"><br><br><h4 style="text-align:center"><b>Natalia Torres</b></br>Estilista Integral</h4></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 custom-text1 col-lg-6">
<h6 class="text-muted lead">CONTACTO:</h6>
<h6 class="text-muted">
Carrera 8h No. 166-71 Local 2<br>
Santa Cruz de la Ronda.<br>
Teléfonos: 3115988953 – 3112641818.<br>
</h6>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 custom-text col-lg-6">
<h6 class="text-muted lead">ENCUENTRANOS EN LAS REDES</h6>
<div class="redes-footer">
<a href="https://www.facebook.com/"><img src="imagenes/facebook-2.png"></a>
<a href="https://twitter.com/"><img src="imagenes/twitter-2.png"></a>
<a href="https://www.youtube.com/"><img src="imagenes/youtube-2.png"></a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 custom-text col-lg-12">
<p class="text-muted small">José Miguel, arte y belleza @2016.<br> Todos los derechos reservados.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>