Twitter bootstrap 如何在不复制内容的情况下，为不同的屏幕大小重新安排具有嵌套div的引导布局

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

我正在使用Bootstrap3和Jade来安排站点。除了这一页外，它的效果相当不错。我已经复制了四次内容，以获得我想要的布局，因为每一次的排序和/或嵌套都发生了变化

我知道可以使用推/拉来重新排序，但嵌套似乎让这变得相当困难

最糟糕的是，这会创建重复的ID，而我还没有弄清楚如何在Jade中分配和使用唯一的ID

注意，为了客户隐私，我将includes文件名更改为number

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

---

请发布生成的输出+演示。包含的内容只需添加标题和内容段落，1是幻灯片放映，2是社交媒体。看看其他问题，看起来flexbox可能是用css实现的唯一方法。