Javascript 移动<；李>；转到下一列

我有以下html代码：

<div style="column-count: 3;">
    <ul>
        <li><h3>Education<h3></li>
        <li><a>Education 1</a></li>
        <li><a>Education 2</a></li>
        <li><a>Education 3</a></li>
    </ul>
    <ul>
        <li><h3>Careers<h3></li>
        <li><a>Careers1</a></li>
        <li><a>Careers2</a></li>
        <li><a>Careers3</a></li>
    </ul>
    <ul>
        <li><h3>Legal<h3></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
    </ul>
</div>

教育

如您所见，
Education
位于第一列的底部，它看起来很奇怪，因为它的后续锚定标记被移动到下一列。在这种情况下，我想将
教育
移至下一列。任何CSS或JS解决方案？
如果您使用bootstrap，您可以将每个列表设置为一个div，并为每个div分配一个col-xs-4类。如果没有，您可以模拟网格系统。
一个语义不太好但很有效的解决方案是将每个
h3
和下面的
a
封装在一个元素中，然后将它们设置为
display:inline block

我们必须添加一些额外的样式，使列表看起来“正常”，而不是嵌套列表，但这将有效地防止标题挂在任何列的底部。如果包装
h3
的div之一和紧随其后的
a
通常会跨列中断，则在其子项上使用
显示：inline block
（即
h3
和
a
）将防止中断


/*重要部分*/
ul li ul li div h3，
ul li ul li div a{
显示：内联块；
宽度：100%；
}
/*美学*/
ul li ul{
列表样式：无；
左侧填充：0；
}
ulli ulli{
列表样式类型：disc；
}
div{
背景颜色：浅灰色；
最大高度：150像素；
}


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑



教育类
教育1



教育2
教育3
教育4
教育5
教育6





事业
护理人员1



护理人员2
护理人员3





合法的
合法的



合法的
合法的

到目前为止，您尝试了什么？您可以共享任何代码吗？我已经尝试过这个div ul{-webkit column break-inside:auto；/*Chrome、Safari、Opera/page-break-inside:auto；/Firefox/break-inside:auto；/IE 10+/margin-top:0px；margin-bottom:0px；padding-bottom:18px；float:left；}为什么这些都没有关闭？有些人从一个
开始，在另一个
结束。这里发生了什么？不要将代码粘贴到评论部分，编辑您的问题，并在那里添加代码。为什么不在那里使用空白
li
这也可以，试试看你确定你可以用css移动html元素吗？根据OP的请求，他们只关心实际显示，而不关心功能上的移动。CSS可以做到这一点。他们之所以要求这样做，是因为“教育”在列表的底部。你能将CSS分配给返回的html吗？您是否尝试将display:flex添加到父div？