2 Column Lists Gets Separated By Its Heading

I was trying to get the h2 along with its list items, but every time the list count varies the header seems to be appearing in separate column and its lists in other column is ther

Solution 1:

You can reset lidisplay to inline-block , so it should not break into 2 columns

demo

ulli {
  list-style-type: none;
}

.list-parentullia {
  color: #428bca;
}

li {/*to  avoid li to spray through 2 columns*/display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parenth2 {
  margin: 15px0;
}

<h2class="heading">Main Heading</h2><divclass="row"><divclass="col-sm-12"><ulclass="list-parent"><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li></ul></div></div>

---

to push them into first column at the most, another trick is to set a margin on the last element , this is an average setting and not 100% reliable if content and size is not static , content has to be balanced somehow, run snippet below in full page and resize width to see that average setting in action:

ulli {
  list-style-type: none;
}

.list-parentullia {
  color: #428bca;
}

li {
  /*to  avoid li to spray through 2 columns*/display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parenth2 {
  margin: 15px0;
}


/* average pusher *//* only for the show, not wise to use, unless for static and known content */ul.list-parent> :last-child {
  padding-bottom: 20%;/* or a static value*/
}

<h2class="heading">Main Heading</h2><divclass="row"><divclass="col-sm-12"><ulclass="list-parent"><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li><li><h2>Sub Heading</h2><ulclass="sub-list-parent"><li><ahref="">List items</a></li><li><ahref="">List items</a></li></ul></li></ul></div></div>