I'm currently working on a project using Bootstrap 4 to create a responsive design, but I'm facing some challenges.
I managed to achieve the desired layout on CodePen, but I'm struggling to find a way to avoid repeating the code for both desktop and mobile versions.
<p>For desktop:</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-3">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-9">
<div class="row">
<div class="col col-md-8 ">
<div class="content-a">ContentA</div>
</div>
<div class="col col-md-4">
<div class="button">Button</div>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
</div>
</div>
</div>
</div>
<p>For mobile:</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-6">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-6">
<div class="content-a">Content A</div>
</div>
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
<div class="col col-md-12">
<div class="button">Button</div>
</div>
</div>
</div>
Do you think it's possible to merge these layouts? Any suggestions on how I can achieve this?