Css 引导网格重新布局

嗨，我正在尝试使其中包含col的行在断点上以特定方式对齐。 这是一张我希望休息时间如何工作的图片。

它们都必须排成一行的原因是为了对齐。这是一段用两种语言翻译的对话，左边是克罗地亚语，右边是英语。为了便于阅读，行必须顶部对齐。问题出在手机上，我希望整个克罗地亚语对话先进行，然后是英语对话

这里是目前为止的HTML

<div class="row">
    <div class="col-md-6">
        <h3>Croatian</h3>
    </div>
    <div class="col-md-6">
        <h3>English</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Anica</strong>: Putovanje je bilo zbilja ugodno. Proteklo je tako brzo.</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Anica</strong>: The trip was really nice. It went so fast.</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Zvonimir</strong>: A meni je putovanje trajalo predugo. Toliko sam se zaželio vidjeti Hrvatsku...</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Zvonimir</strong>: For me the trip lasted too long. I wanted so much to see Croatia...</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Višnja</strong>: Mama, ja sam tako žedna. Moram nešto popiti ...</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Višnja</strong>: Mom, I am so thirsty! I have to drink something.</p>
    </div>
</div>

克罗地亚人
英语
阿尼卡（Anica）:Putovanje bilo zbilja ugodno。普罗特克洛·杰塔科·布尔佐
安妮卡：旅途真的很愉快。它跑得太快了
Zvonimir：一位年轻人。托利科·萨姆·塞扎伊奥·维杰蒂·赫瓦茨库
Zvonimir：对我来说，这次旅行持续的时间太长了。我非常想看到克罗地亚
Višnja:Mama，ja sam takožedna。莫拉姆·内什到波皮蒂
Višnja：妈妈，我好渴！我得喝点东西

我知道我可以使用表格或复制内容，并根据屏幕大小显示/隐藏，但如果有一种方法可以操纵引导网格以获得所需的布局，那将是最好的

谢谢你的帮助。 是这样的吗

<div class="container">
<div class="row">
    <div class="col-md-6">
        <h3>Croatian</h3>            
    </div>
    <div class="col-md-6">
        <h3>English</h3>            
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="col-xs-12">Croatian 1</div>
        <div class="col-xs-12">Croatian 2</div>
        <div class="col-xs-12">Croatian 3</div>
    </div>
    <div class="col-md-6">
        <div class="col-xs-12">English 1</div>
        <div class="col-xs-12">English 2</div>
        <div class="col-xs-12">English 3</div>
    </div>
</div>

克罗地亚人
英语
克罗地亚1
克罗地亚2
克罗地亚语3
英语1
英语2
英语3

克罗地亚人
阿尼卡（Anica）:Putovanje bilo zbilja ugodno。普罗特克洛·杰塔科·布尔佐
阿尼卡（Anica）:Putovanje bilo zbilja ugodno。普罗特克洛·杰塔科·布尔佐
英语
安妮卡：旅途真的很愉快。它跑得太快了
安妮卡：旅途真的很愉快。它跑得太快了

我需要一行一行的对话来保持它们的顶部对齐。这意味着如果“克罗地亚1号”是3行，“英语1号”是一行，那么第二行（克罗地亚2号和英语2号）将是顶部对齐的。换成引导4号会很麻烦吗？使用flexbox，您可以摆脱顶部对齐。