bootstrapの幅別での表示分け

col-lg-数字 = 画面サイズが≥1200pxの場合このクラスが適応されます。
col-md-数字 = 画面サイズが≥992pxの場合このクラスが適応。
col-sm-数字 = 画面サイズが≥768pxの場合このクラスが適応。
col-xs-数字 = 画面サイズが<768pxの場合このクラスが適応。

bootstrapはメディアクエリに対応している

bootstrapは別ファイルでCSSを指定しなくても
HTMLのタグの中にclass名を指定するだけで簡単に整ったデザインのページを作ることができますが、

レスポンシブデザインに対応しているという特徴もある（画面幅に合わせてレイアウトを変えること）。
通常ではCSSのメディアクエリというものを使って
レイアウトを調整することになるのですが
Bootstrapを使うと
どのような画面サイズであっても必要に応じて
自動調整して最適なレイアウトを実現することが
容易にできるのです！

しかし縦のスペースを作りたい場合は、独自にCSSで指定する必要があるらしい。

縦に余白を少し入れたい。smサイズ限定で。
というような、特定のサイズの時だけ定期用させたい場合は以下のように指定

横幅768以上(sm以上)で適用

@media (min-width: 768px) {
.generate {
margin-top: 10px;
}
}

横幅992以下(md以下)で適用


@media (max-width: 992px) {
.generate {
margin-top: 10px;
}
}

横幅768以上(sm以上)・横幅992以下(md以下)で適用

こう指定すれば、sm以下、md以上では適用されない。


/* これが正解 */
@media (min-width: 768px) and ( max-width:992px){
.generate {
margin-top: 10px;
}
}

ポイントはandで繋げてmin , maxを指定できたこと。

＊(横に余白入れたい場合はco-sm-offset-1とかで簡単にできるのだがね)。

参考
http://www.yuta-system.com/homepage/pccss3.html
https://shared-blog.kddi-web.com/bootstrap/mediaquery.html
http://www.mdesign-works.com/blog/web/responsive-design-css/
https://sole-color-blog.com/blog/71/