I am working on creating a text layout within a bootstrap card that adjusts well on different screen sizes. Currently, the Title and body text are not responsive, causing issues on smaller screens. How can I modify the layout so that the Title appears above the body text on smaller screens? Here is my current code:
HTML
<div class="card shadow hover-scale-110 mt--100" style="background-color: #F3E500;border-radius: 25px;">
<div class="card-body p-5">
<div style="width: 100%;">
<div class="innerDiv" style="width: 15%;">
<h2 style="font-weight:bold;">Dear fellow Kenyans</h2>
</div>
<div class="innerDiv" style="width: 85%;">
<span>Power is one of the most essential utilities in these difficult times of the COVID-19 pandemic.
As Mobisol, we are extending a caring hand to help equip the more than 27 million Kenyans staying at home in the dark, with no or limited access to power.
Solar energy is easy to acquire, install and inexpensive to use with the sun shining free of charge! We are contributing by making it more affordable and convenient to purchase, transport and install the Mobisol solar power package to benefit these families.
Below are our discounted items categorised according to their specifications.<br/>
</span><br>
<span style="font-style:normal;font-weight:bold;">Please join us in spreading the #PowerOfLove.</span>
</div>
</div>
</div>
</div>
CSS
.innerDiv{
float: left;
width: 100%;
}