Html 引导flexbox列彼此相邻，而不是彼此下方

我在使用flexbox引导CSS修复布局时遇到困难

我的布局应该如下所示：

English           <rowdata>
French            <rowdata>
Dutch             <rowdata>
                  <rowdata>
                  <rowdata>
                  <rowdata>

英语
法语
荷兰的

但是，其中一个行数据包含一个相当大的元素，带有许多复选框（用于指示不同的日期部分），由于此宽度，整个右侧将导致我的布局完全移动到语言“选项卡”下方。 我如何解决这个问题

这是显示问题的JSFIDLE：

这里是同样的提琴，但没有复选框字段（这会破坏布局），以显示其外观：

---

这是一个工作示例，您必须使用引导断点。请检查我附带的类col-md-2和col-md-10

This is the JSFiddle that resolved the issue: https://jsfiddle.net/mko72x6y/1/  

---

这管用！非常感谢。