Utilizing the Bootstrap grid system to organize text boxes in a 2 by 2 layout on a webpage. The desktop view displays the content in rows and columns effectively, but it would be beneficial to have an easy way to adjust the width.
However, the problem arises when viewing the webpage on a mobile device. The content does not scale proportionally, causing the boxes to shrink and become difficult to read.
The ideal solution is for the boxes to automatically resize and stack vertically on top of each other when viewed on a mobile device. This ensures that the content is easily readable on a phone.
Instead of: [A][B] [C][D]
This is how they should appear on mobile:
[A]
[B]
[C]
[D]
What is the best way to achieve this? Here is a visual reference:
Mobile View:
https://i.sstatic.net/mZPwS.png
HTML
<html>
<head>
<title>site</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container"> <!--bootstrap class-->
<div class="services">
<h1>Our <span>Services</span></h1>
<p>text here</p>
</div>
<div class="row">
<div class="col-md-6">
<div class="service-box">
<i class="fa fa-smile-o" aria-hidden="true"></i>
<h3><span>Box A</span></h3>
<p>
Text
</p>
</div>
</div>
<div class="col-md-6">
<div class="service-box">
<i class="fa fa-eye" aria-hidden="true"></i>
<h3><span>Box B</span></h3>
<p><b>List:</b><br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10
</p>
</div>
</div>
</div>
<div class="row" style="margin-top: 35px">
<div class="col-md-6">
<div class="service-box">
<i class="fa fa-pencil"></i>
<h3><span>Box C</span></h3>
<p>
I<br>
II<br>
III<br>
</p>
</div>
</div>
<div class="col-md-6">
<div class="service-box">
<i class="fa fa-shield"></i>
<h3><span>Box D</span></h3>
<p>
Defender<br>
</p>
</div>
</div>
</div>
<a href="#" class="home-button"><i class="fa fa-home" aria-hidden="true"></i> HOME</a>
</div>
</body>
</html>