Html 网站菜单2级，桌面和手机上的不同堆叠

我正在为一个网站创建菜单。它有两个级别。您可以单击该部分的标题，然后显示该部分的链接，而其他部分则隐藏。很简单

现在的问题是，移动视图完全不同。它的工作原理相同，但节首先显示为列表，节链接（以当前显示的为准）显示在下面。像这样：

我已经使用引导程序成功地做到了这一点（去除了不必要的代码）：

第一节标题


...

第2节标题


...



...



...

它起作用了。但是我想避免创建两次小节。此外，章节标题不会显示为列表，而是作为网格中的列进行“欺骗”。

*{
填充：0；
保证金：0；
列表样式：无；
文本缩进：0；
}
保险商实验室{
填充：1em；
显示器：flex；
柔性包装：包装；
证明内容：中心；
边框：1px实心；
}
李{
显示：内联块；
宽度：50%；
背景色：#ddd；
边框：1px实心#fff；
框大小：边框框；
文本对齐：居中；
}

第1节中的链接
第1节中的链接
第1节中的链接
第1节中的链接
第1节中的链接

*{
填充：0；
保证金：0；
列表样式：无；
文本缩进：0；
}
保险商实验室{
填充：1em；
显示器：flex；
柔性包装：包装；
证明内容：中心；
边框：1px实心；
}
李{
显示：内联块；
宽度：50%；
背景色：#ddd；
边框：1px实心#fff；
框大小：边框框；
文本对齐：居中；
}

第1节中的链接
第1节中的链接
第1节中的链接
第1节中的链接
第1节中的链接

您只能使用两列，并使

比窄屏幕上的列宽

我使用了标准和

col-xs-6 col-sm-12

类，而不是

col-xs-6 col-lg-12

我在一个狭窄的屏幕上画了背景，使布局可视化

var listFirst=$（'#list-1'）；
var listSecond=$（“#list-2”）；
listFirst.on（'show.bs.collapse'，函数（）{
listSecond.collapse（'hide'）；
})
listSecond.on（'show.bs.collapse'，函数（）{
listFirst.collapse（'hide'）；
})

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/*核心问题*/
@介质（最大宽度：767px）{
#清单1，
#清单2{
宽度：100vw！重要；
}
#清单1{
保证金权利：-50vw；
}
#清单2{
左边距：-50vw；
}
.col-xs-6{
填充：0；
}
}
/*形象化*/
@介质（最大宽度：767px）{
.col-xs-6：第一个孩子{
背景：#69c；
}
.col-xs-6：最后一个孩子{
背景：#c69；
}
#清单1，
#清单2{
背景：#9c6；
}
A.
a:悬停，
a:焦点{
颜色：白色；
}
}
/*装饰物*/
.集装箱{
边缘顶部：12px；
}
a{
显示：块；
字体大小：14px；
字体大小：正常；
线高：1；
填充：4px8px；
}
a[aria expanded=“true”]{
字体大小：16px；
字体大小：粗体；
填充：2px8px；
}
保险商实验室{
列表样式：无；
}
@介质（最大宽度：767px）{
a{
文本对齐：居中；
}
#清单1，
#清单2{
边缘顶部：12px；
填充：0；
文本对齐：居中；
}
#名单1李，
#表2李{
显示：内联块；
}
}

您只能使用两列，并使

比窄屏幕上的列宽

我使用了标准和

col-xs-6 col-sm-12

类，而不是

col-xs-6 col-lg-12

我在一个狭窄的屏幕上画了背景，使布局可视化

var listFirst=$（'#list-1'）；
var listSecond=$（“#list-2”）；
listFirst.on（'show.bs.collapse'，函数（）{
listSecond.collapse（'hide'）；
})
listSecond.on（'show.bs.collapse'，函数（）{
listFirst.collapse（'hide'）；
})

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/*核心问题*/
@介质（最大宽度：767px）{
#清单1，
#清单2{
宽度：100vw！重要；
}
#清单1{
保证金权利：-50vw；
}
#清单2{
左边距：-50vw；
}
.col-xs-6{
填充：0；
}
}
/*形象化*/
@介质（最大宽度：767px）{
.col-xs-6：第一个孩子{
背景：#69c；
}
.col-xs-6：最后一个孩子{
背景：#c69；
}
#清单1，
#清单2{
背景：#9c6；
}
A.
a:悬停，
a:焦点{
颜色：白色；
}
}
/*装饰物*/
.集装箱{
边缘顶部：12px；
}
a{
显示：块；
字体大小：14px；
字体大小：正常；
线高：1；
填充：4px8px；
}
a[aria expanded=“true”]{
字体大小：16px；
字体大小：粗体；
填充：2px8px；
}
保险商实验室{
列表样式：无；
}
@介质（最大宽度：767px）{
a{
文本对齐：居中；
}
#清单1，
#清单2{
边缘顶部：12px；
填充：0；
文本对齐：居中；
}
#名单1李，
#表2李{
显示：内联块；
}
}

<
<div class="row">

    <div class="col-xs-6 col-lg-12">
        Section 1 title
    </div>

    <div class="col-lg-12 hidden-xs">
        <ul>
            <li><a href="">Link in section 1</a></li>
            ...
        </ul>
    </div>

    <div class="col-xs-6 col-lg-12">
        Section 2 title
    </div>

    <div class="col-lg-12 hidden-xs">
        <ul>
            <li><a href="">Link in section 2</a></li>
            ...
        </ul>
    </div>

</div>

<div class="row visible-xs">

    <div class="col-xs-12">
        <ul>
            <li><a href="">Link in section 1</a></li>
            ...
        </ul>
    </div>

    <div class="col-xs-12">
        <ul>
            <li><a href="">Link in section 2</a></li>
            ...
        </ul>
    </div>

</div>