Currently, I am using Bootstrap 4 and seeking your assistance. My goal is to create a two-column grid layout with a row that rearranges on mobile devices:
This is my current approach:
<div class="row">
<div class="col-md-10 offset-md-1 col-sm-10 offset-sm-1">
<div class="col-md-6 col-sm-12">
<img src="my source" alt="My alt" />
</div>
<div class="col-md-6 col-sm-12">
<h2>My title</h2>
<p>My text</p>
</div>
</div>
</div>
This method worked perfectly in Bootstrap 3 but unfortunately does not work in V4.
I am aiming for something like this:
.row>div{
width: 49.7%;
display: inline-block;
}
@media screen and (max-width: 991px){
.row>div{
width: 100%;
display: block;
}
}<div class="row">
<div id="first_column">My first column</div>
<div id="second_column">My second column</div>
</div>Any advice on how I can achieve this? Thank you for your help!