Im using bootstrap but still not flex - html

Question

here is my index.html:
<div id="container1" class="py-0 my-0">
<div id="left" class="col-md-6">
<img class="image" src="C:\Users\asus\Desktop\project\image.png">
</div>
<div id="right" class="col-md-6">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-index">
HOME
</li>
<li class="nav-index">
ABOUT US
</li>
<li class="nav-index">
COURSES
</li>
<li class="nav-index">
LOG IN
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<p class="paragraph col-md-6">
<h3 class="Welcome text-center">Welcome to mobile legends!</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<footer class="footer1" id="footer1">
<h6>Contact the developer:</h6>
<p>luckyllemos0909#gmail.com</p>
</footer>
</div>
</div>
here is my style.css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
align-items: center;
vertical-align: middle;
}
#container1{
width: 100%;
height: 100%;
vertical-align: middle;
display: flex;
align-items: center;
}
#left,
#right {
width: 50%;
height: 100%;
}
#left {
background: #ffd6dd;
align-items: center;
}
.image{
margin-top: 50px;
margin-left: -10px;
padding: 100px;
}
#right {
background: #FBAED2;
align-items: center;
}
.paragraph{
color: red;
margin: 50px;
}
.fa {
margin-top: none;
padding: 20px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
color: #000000;
}
.fa-linkedin {
color: #000000;
}
.fa-youtube {
color: #000000;
}
.Welcome{
margin-left:60px;
}
.nav-link{
color: #000000;
}
.nav-index{
padding-left: 30px;
padding-right: 30px;
align-items: center;
}
my problem is when i put it in mobile phone it does not go flexible.
This is the original output:
and This what happens when try to look on mobile screen:

Answer 1

What you're looking for is media queries, which let you decide how your website looks on varying screen sizes. In the example below in the css class example is first shown how it would look on a larger screen size, then below with the media query in effect you can stylize how your page would look on a (in this example) a screen with a width of less than 900px. Take a look at the link below for further explanation.
.example {
font-family: "Droid+Sans";
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
margin: auto;
width: 50%;
left: 20%;
right: 20%;
padding-bottom: 100px;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

Use Bootstrap Utility Classes in a better way. Since you are using bootstrap simply add your classes to work for different break points.
Add col-12 Utility classes on the following elements: Note that Bootstrap follows mobile-first approach.
<div id="left" class="col-12 col-md-6">
And
<div id="right" class="col-12 col-md-6">