如何针对不同的屏幕尺寸重新排列带有嵌套div的引导程序布局，而不重复内容

Question

我试图想出一种尽可能简化网页HTML的方法。

我使用Bootstrap 3和Jade来安排网站。除了这一页，它的工作相当不错。我必须四次复制内容以获得我想要的布局，因为每个的排序和/或嵌套都会发生变化。

我知道可以使用推/拉来对事物进行重新排序，但是嵌套似乎使得相当困难。

最糟糕的是，这会产生重复的ID，而且我还无法弄清楚如何使用Jade分配和使用唯一ID。

请注意，我将包含文件名更改为客户隐私号码。

block content
  .visible-lg
    .col-sm-4
      include ./includes/index/1.jade
    .col-sm-4
      include ./includes/index/3.jade
      include ./includes/index/2.jade
    .col-sm-4
      include ./includes/index/4.jade
      include ./includes/index/5.jade

  .visible-md
    .col-md-4
      include ./includes/index/1.jade
      include ./includes/index/2.jade
    .col-md-8
      include ./includes/index/3.jade
      .col-md-6
        include ./includes/index/4.jade
      .col-md-6
        include ./includes/index/5.jade

  .visible-sm
    .col-sm-6
      include ./includes/index/1.jade
      include ./includes/index/2.jade
    .col-sm-6
      include ./includes/index/3.jade
      include ./includes/index/4.jade
      include ./includes/index/5.jade

  .visible-xs
    include ./includes/index/1.jade
    include ./includes/index/3.jade
    include ./includes/index/4.jade
    include ./includes/index/5.jade
    include ./includes/index/2.jade