Html 引导4个高度相同的嵌套行

我认为这个要求很简单：结果应该是一个包含两个主题的非常基本的登录页。每个主题都有一个子主题。 在手机上，应该只有一列连续包含主题1、副主题1、主题2、副主题2。 在桌面上，主题应并排出现，子主题应垂直对齐

<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>

专题1
四行文本
第2行
第3行
第4行

专题2
两行文本
第2行

小标题1
行数
无关紧要

次主题2
但是副标题1和副标题2应该垂直对齐，而>=md
和
=sm
当时，一种方法是使用引导中的
order
实用程序类，并将所有元素的标记调整为同一级别：

<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 &gt;=md<br>and when &lt;md, Subtopic 1
                    shold be below Topic 1, not below Topic 2</p> </div> </div> <hr>
        </div>
    </div>
</div>


专题1
四行文本
第2行
第3行
第4行

专题2
两行文本
第2行

小标题1
行数
无关紧要

次主题2
但是副标题1和副标题2在=md时应垂直对齐，而在md时，应垂直对齐副标题1
应该在专题1下方，而不是专题2下方

检查文档

另一种方法是为主题列设置预定义的固定高度，或者获取最高的主题高度，并在页面加载和窗口调整时使用JavaScript将其设置为所有其他高度。
一种方法是使用Bootstrap中的
order
实用程序类，并将所有元素的标记调整为同一级别：

<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 &gt;=md<br>and when &lt;md, Subtopic 1
                    shold be below Topic 1, not below Topic 2</p> </div> </div> <hr>
        </div>
    </div>
</div>


专题1
四行文本
第2行
第3行
第4行

专题2
两行文本
第2行

小标题1
行数
无关紧要

次主题2
但是副标题1和副标题2在=md时应垂直对齐，而在md时，应垂直对齐副标题1
应该在专题1下方，而不是专题2下方

检查文档

另一种方法是为主题列设置预定义的固定高度，或者获取最高的主题高度，然后在页面加载和窗口调整时使用JavaScript将其设置为所有其他列。
多么尴尬-我已经多次阅读了关于顺序的文档，但没有意识到解决方案就在那里。。。很有魅力，非常感谢！欢迎@Ambix。考虑到HTML标记也需要改变，不会觉得很尴尬！多么尴尬-我已经阅读了好几次关于订单的文件，但没有意识到解决方案就在那里。。。很有魅力，非常感谢！欢迎@Ambix。考虑到HTML标记也需要改变，不会觉得很尴尬！