After creating a layout in Figma, I have set up a grid structure as follows:
<div class="container-fluid">
<div class="row" id="sobre-nos-wrapper">
<div class="col">
<div class="row">
<div class="col">
<h1>Title</h1>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<p>
Text 1
</p>
</div>
<div class="col">
<p>
Text 2
</p>
</div>
<div class="col">
<p>
text 3
</p>
</div>
<div class="col-sm-12 col-md-4">
<img class ="" src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>For different screen sizes, I want the layout to be displayed differently. For XL and LG screens (>= 992px), I want the design to show in one viewport. For MD screens (>= 678px), only the text should be displayed in one whole viewport. And for SM and XS screens (>= 576px), each element should be shown separately in entire viewports (title, paragraphs, and picture). Any tips or advice on how to achieve this would be highly appreciated! Feel free to ask if you need more information.