Bootstrap 4 nested rows with same height - html

Question

Thought that this requirement was a simple one: The result should be a very basic landing page containing two topics. Each topic has a subtopic.
On mobile, there should be only one column containing Topic1, Subtopic1, Topic2, Subtopic2 consecutively.
On desktop the topics should appear side by side and the subtopics should be vertically aligned.
<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>
I am badly surprised that I have no idea how to solve this. Any hints are deeply appreciated.

Answer 1

One way would be using order utility classes from Bootstrap and adjusting your markup for all elements to be at the same level:
<div class="container-fluid">
<div class="row">
<div class="order-0 order-md-0 col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="order-2 order-md-1 col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
<div class="order-1 order-md-2 col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="order-3 order-md-3 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>
</div>
</div>
</div>
Check the documentation here.
Another would be to set either a predefined fixed height for your topic columns, or get the highest topic height and set it to all others with JavaScript at page load and window resize.