版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lineuman/article/details/82950620
https://getbootstrap.com/docs/3.3/css/
http://wiki.jikexueyuan.com/project/bootstrap4/layout/grid/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8" style="background-color: red;">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4" style="background-color: green">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
</div>
</body>
</html>
在电脑大浏览器中显示
在小浏览器中显示
