Bootstrap网格重新布局

Question

您好我正在尝试使用cols制作行，在断点上对齐特定的方式。 这是我希望休息工作的图像。

它们必须排成行的原因是为了对齐。这是一个用两种语言翻译的对话，左边是克罗地亚语，右边是英语。行必须顶部对齐以便于阅读。问题出在移动设备上，我希望首先是整个克罗地亚人的谈话，然后是英语会话。

这是目前为止的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>

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

感谢您的帮助。 小号

Answer 1

这样的东西？

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

Answer 2

  numrows = 3
  numcols = 4
  def empty_grid():
    return [['-' for y in range(numcols)]
        for x in range(numrows)]