For this particular requirement, the goal is to create a simple landing page with two main topics, each having a subtopic. The layout should adjust based on the device it's being viewed on - one column for mobile and side-by-side for desktop. Additionally, the alignment of topics and subtopics needs to change accordingly.
<div class="container-fluid">
<!-- Subtitles are on the same height but the order on mobile is wrong -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="col-md-6">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
<hr>
<!-- Display on mobile is correct but subtitles on desktop are not aligned anymore -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
<div class="row">
<div class="col">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
</div>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
<div class="row">
<div class="col">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=sm<br>and when <sm, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
</div>
</div>
</div>
Facing some challenges in addressing these design requirements effectively. Any tips or suggestions would be greatly helpful.