bootstrap v3 动态数据样式排版问题

有一组动态数据，分为一级标题，二级标题，三级按钮（需要触发点击事件）
最外层一个div套一级标题，
一级标题的div套二级标题，
二级标题的div套三级按钮，
想要实现根据width自动换行的样式（暂定8列按钮的width），
一级标题短的要几个在同一行，长的换行，并且当按钮少于8列的时候width会自适应拉长，填充整行
相同一级标题下的二级标题要在同一行，不能换行，
相同二级标题下的三级按钮每两个换行

如下图所示（第一行7列按钮，第二第三行8列按钮）

数据中一级标题存在重复，二级标题也有重复，三级按钮是唯一值
数据样例：

0: {一级标题: '一级标题1', 二级标题: '二级标题1', 三级按钮: '三级按钮1'}
1: {一级标题: '一级标题1', 二级标题: '二级标题2', 三级按钮: '三级按钮2'}
2: {一级标题: '一级标题2', 二级标题: '二级标题3', 三级按钮: '三级按钮3'}
3: {一级标题: '一级标题2', 二级标题: '二级标题3', 三级按钮: '三级按钮4'}
4: {一级标题: '一级标题2', 二级标题: '二级标题4', 三级按钮: '三级按钮5'}
5: {一级标题: '一级标题2', 二级标题: '二级标题4', 三级按钮: '三级按钮6'}
6: {一级标题: '一级标题2', 二级标题: '二级标题5', 三级按钮: '三级按钮7'}
7: {一级标题: '一级标题3', 二级标题: '二级标题6', 三级按钮: '三级按钮8'}
8: {一级标题: '一级标题4', 二级标题: '二级标题7', 三级按钮: '三级按钮9'}