Estou desenvolvendo um projeto, mas estou com problemas em questões de responsividade, quando o site muda para diferentes tela como: celulares, tablets e outros dispositivos. Ele quebra todo o seu layout, estou usando o bootstrap e as suas tags, porém estou com algumas dificuldades sobre o entendimento do mesmo.
<link href="<?php echo get_template_directory_uri(); ?>/css/meu-estilo.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/img/favicon.png" rel="icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/css/nivo-slider.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.transitions.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/animate/animate.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/https://www.w3schools.com/w3css/4/w3.css">
<script src="<?php echo get_template_directory_uri(); ?>/lib/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/knob/jquery.knob.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/wow/wow.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/parallax/parallax.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/easing/easing.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/appear/jquery.appear.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/lib/isotope/isotope.pkgd.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/contactform/contactform.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" rel="stylesheet">
</head>
<body>
<header>
<!-- header-area start -->
<div class="header-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<!-- Navigation -->
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
<a class="navbar-brand page-scroll sticky-logo" href="index.html">
<img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="Logo">
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="img/logo.png" alt="" title=""> -->
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse main-menu bs-example-navbar-collapse-1" id="navbar-example">
<ul class="nav navbar-nav " style="margin-left:395px;">
<li>
<a class="page-scroll " href="/index"><b>A Blue</b></a>
</li>
<li>
<a class="page-scroll" href="/negocios"><b>Nossos Negócios</b></a>
</li>
<li>
<a class="page-scroll" href="/investir"><b>Porque Investir</b></a>
</li>
<li>
<a class="page-scroll" href="/social"><b>Blue Social</b></a>
</li>
<li>
<a class="page-scroll" href="/contato"><b>Contato</b></a>
</li>
</ul>
</div>
<!-- navbar-collapse -->
</nav>
<!-- END: Navigation -->
<div onclick="scrollToTop" class="retangulo">
<a class="arrumarInvestidor" href="/investidor"><b>Área do Investidor</b></a>
</div>
</div>
</div>
</div>
</div>
<!-- header-area end -->
</header>
<!-- header end -->
<div class="container-fluid" style="padding-right: 0; padding-left: 0">
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-12">
<img src="<?php echo get_template_directory_uri(); ?>/imgBlue/ImagemBlueBackGround.jpg" class="">
<form class="w3-container w3-card-4" action="/action_page.php" style="
position: absolute;
bottom: 218px;
left: 439px;
">
<input class="w3-input w3-border" name="first" type="text" style="
width: 489px;
height: 53px;
" placeholder="Usuário">
<br>
<br>
<input class="w3-input w3-border" name="last" type="text" style="
width: 489px;
height: 53px;
" placeholder="Senha">
<br>
<br>
<button class="btn btn-default" type="submit" style="
float: left;
margin-left: 138px;
width: 243px;
height: 53px;
">Entrar</button>
</form>
</div>
</div>
</div>
<footer>
<div class="footer-area" style="background-color: #c7c8ca;">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="col-md-8"><h5 class="abluefooter"><b><a href="/index">A blue</a></b></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/index#quemSomos">Quem somos</a> </h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/index#atuacao">Atuação</a></h5></div>
<div class="col-md-8"><h5 class="tudo">Core Business</h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/index#valores">Valores </a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/index#qualificaoTecnica">Qualifação técnica</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/index#parceiros">Parceiros</a></h5></div>
</div>
<div class="col-md-2">
<div class="col-md-8"><h5 class="nossos"><b><a href="/negocios">Nossos negócios</a></b></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/negocios#linhaTempo">Linha do tempo</a></h5></div>
</div>
<div class="col-md-2">
<div class="col-md-8"><h5 class="nossos"><a href="/investir">Porque Investir</a></h5></div>
<div class="col-md-8"><h5 class="m"><a href="/investir#modeloInvestimentos">Modelo de investimentos</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/investir#vantagens">Vantagens</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/investir#modeloNegocio">Modelo de negócio</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/investir#compliance">Compilance</a></h5></div>
</div>
<div class="col-md-2">
<div class="col-md-8"><h5 class="nossos"><a href="/social">Blue Social</a></h5></div>
<div class="col-md-8"><h5 class="m"><a href="/social#blueSocial">Responsabilidade Social</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/social#comoFunciona">Como funciona</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/social#instituicoes">Instituições</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/social#apoiamAcausa">Eles apoiam a causa</a></h5></div>
</div>
<div class="col-md-2">
<div class="col-md-8"><h5 class="nossos"><a href="/contato">Contato</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Compramos seu terreno </a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Trabalhe conosco</a></h5></div>
<div class="col-md-8"><h5 class="tudo"><a href="/contato#localizacao">Localização</a></h5></div>
</div>
</div>
<div class="col-md-5"><img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="logoFooter"></div>
<div class="col-md-7">
<p class="a"><b>BLUE</b></p>
<p class="rua">Rua Kalil Elias Warde, 219 </p>
<p class="ruaCampina">Campina do Siqueira - Curitiba - PR</p>
<p class="number">(41) 3090.3690 (41) 3090.3662</p>
<p class="e">contato@blueempreendimentos.com.br</p>
</div>
</div>
</div>
</footer>
</body>
link da tela do site: http://blueholding.hqssolucoes.com.br/investidor/