I am createing the footer.php for my costum theme. [![The picture represents my idea][1]][1]


  [1]: https://i.sstatic.net/xcQi2.png

The whole footer is full with/356. In the middle of this container I another container which is 960/252. Inside I have some components(logo, social icons,navigation,copyright). I assume they also should be in separate containers. On a mobile this all should be responsive. 
Since I am doing my first steps with Bootstrap, I tried to add my custom style. I am changing the style, but than it is not responsive. COuld you give me directions:
1) do I need to place the separate components(loso, social,nav, copy) in different containers?
2) how can I change the style of each container and keep the responsiveness?

My footer.php:

  

    <style>
    #ch {
    background-color: yellow;
    height: 356;
     }

    #chuchu {
     background-color: pink;
    height: 252;
    width: 960;

    }
    </style>



    
  
    <?php if(!is_page_template( 'blank-page.php' ) && !is_page_template( 'blank-
    page-with-container.php' )): ?>
			</div><!-- .row -->
		</div><!-- .container -->
	</div><!-- #content -->
    <?php get_template_part( 'footer-widget' ); ?>
	<footer id="colophon" class="site-footer" role="contentinfo">
		<div id="ch" class="container-fluid p-3 p-md-5">

		<div id="chuchu"class="row">
    <div class="col flex-unordered">
	First, but unordered
    </div>
    <div class="col flex-last">
      Second, but last
    </div>
    <div class="col flex-first">
      Third, but first
    </div>
  </div>