今後の作業用に個人的メモも兼ねて。このやり方で大丈夫なのか自信はありませんが。

レスポンシブコーディングを行うのに何かと便利なBootstrapですが、基本的には12分割となっています。でもメニューなどデザインの関係で横列に5個や7個など並べたい時もあるかと思います。

Googleなどで検索するとCSSの追加で「width: 20%; float: left;」を使用した方法や、「col」のみで横並べする方法がよく見受けられます。前者は前時代的な気がしてBootstrapに移行した意味が薄れそうで・・・、後者はclassに指定するだけで横に並びますが、スマホサイズになっても下に落ちないので小さく見づらい。

今回は出来るだけスタイルも単純化したかったので、「col」指定に加えて「max-width: 50%;」などを使用した独自クラスでタブレットサイズ以下の時は2列になるようにしてみました。

個人的にはCSS グリッドレイアウトも試してみたいのですが、IE10をどうするかでしょうか。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout