====== Responsive Layout ======

  * responsive column ration, defined from small screen to large:
    * xs (phones), sm (tablets), md (desktops), and lg (larger desktops)
    * example of Left Text Right Image layout<code html>
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-4 ">
            <p style="margin-bottom:30px;">Text</p>
            <div class="row">
                <div class="col-6" align="center">
                  <a class="btn btn-secondary rounded-pill" style="width:150px;margin-bottom:20px;" href="#" role="button">Login</a>
                </div>
                <div class="col-6" align="center">
                  <a class="btn btn-danger rounded-pill" style="width:150px" href="#" role="button">Signup</a>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-8 text-left d-flex flex-wrap align-items-center">
            <img src="img/bg_home.png" style="margin-bottom:20px;margin-top:20px; width:100%;" />
        </div>
   </div>
</div>
</code>

  * notes:
    * col-12 means each column will stack on each other until large screen, then will do 4 to 8 ratio layout
    * d-flex flex-wrap align-items-center: make its content vertically align
    * align="center": make its content horizontal align
    * col-6: always make 2 item side by side in their parent container

  * display on certain screen size:
    * ref: https://getbootstrap.com/docs/4.0/utilities/display/
    * https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
    * example <code>
new one use
.d-sm-none .d-md-block

that is old code
.hidden - force hidden
.invisible - force invisible
- 768px - 992px - 1200px -
.hidden-md .hidden-lg - for hidden in large screen
.hidden-sm .hidden-xs - for hidden in small screen
</code>