我正在尝试学习Bootstrap4。我将页面设置为三列布局，并定义了以下属性：
第1列具有：col-sm-9 col-md-8 第2列具有：col-sm-3 col-md-2 order-sm-first 第3列包含：col-xs-12 col-md-2
我认为应该发生的事情是，我得到2列的布局，直到992px宽，但是发生的事情是，当屏幕为768时，我已经获得了3列的布局。
jsfiddle：https://jsfiddle.net/lucasw89/f9sc02h6/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<!-- My Css -->
<link rel="stylesheet" href="./style.css">
<title>Hello, world!</title>
</head>
<body>
<header class="container-fluid">
<h1>Header</h1>
</header>
<div class="container-fluid">
<div class="row">
<section class="col-sm-9 col-md-8">
<article>
<h2>Why I Went Into the Lake</h2>
<img src="./images/lake.jpg" />
<div class="row">
<p class="col-sm-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="col-sm-2">
<input type="button" class="btn btn-primary" value="More..." />
</div>
</div>
</article>
<article>
<h2>My Name is NOT Bullwinkle</h2>
<img src="./images/elk.jpg" />
<div class="row">
<p class="col-sm-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="col-sm-2">
<input type="button" class="btn btn-primary" value="More..." />
</div>
</div>
</article>
<article>
<h2>There's Gotta be a Penguin Up Here Somewhere</h2>
<img src="./images/snowboarder.jpg" />
<div class="row">
<p class="col-sm-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<div class="col-sm-2">
<input type="button" class="btn btn-primary" value="More..." />
</div>
</div>
</article>
</section>
<aside class="col-sm-3 col-md-2 order-sm-first">
<h4 class="range-title">
<b>Mountain Ranges</b>
</h4>
<div class="range-list">
<a href="wasatch-range.html">
<img src="./images/range-1.png" />
<h4>Wasatch Range</h4>
</a>
<a href="mummy-range.html">
<img src="./images/range-2.png" />
<h4>Mummy Range</h4>
</a>
<a href="front-range.html">
<img src="./images/range-3.png" />
<h4>Front Range</h4>
</a>
<a href="sawtooth-range.html">
<img src="./images/range-4.png" />
<h4>Sawtooth Range</h4>
</a>
<a href="west-elk-mountains.html">
<img src="./images/range-5.png" />
<h4>West Elk Mountains</h4>
</a>
</div>
</aside>
<aside class="sports-icon-list col-xs-12 col-md-2">
<a href="downhill.html">
<img src="./images/icon-downhill.png" alt="Downhill" />
<h6>Downhill</h6>
</a>
<a href="snowboarding.html">
<img src="./images/icon-snowboard.png" alt="Snowboarding" />
<h6>Snowboarding</h6>
</a>
<a href="bobsled.html">
<img src="./images/icon-bobsled.png" alt="Bobsled" />
<h6>Bobsled</h6>
</a>
<a href="cross-country.html">
<img src="./images/icon-cross-country.png" alt="Cross Country" />
<h6>Cross Country</h6>
</a>
<a href="biathlon.html">
<img src="./images/icon-biathlon.png" alt="Biathlon" />
<h6>Biathlon</h6>
</a>
</aside>
</div>
</div>
<footer class="container-fluid">
<h1>Footer</h1>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
</body>
</html>
css：
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic);
body{
font-family: 'Open Sans', sans-serif;
}
header, footer{
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
aside {
background-color: #f7f7f7;
text-align: center;
padding-top: 40px;
}
/* The Muntain Ranges */
.range-list {
padding-bottom: 40px;
padding-top: 40px;
}
.range-list h4 {
margin-bottom: 40px;
color: darkorange;
font-weight: bold;
}
.range-list img {
width: 100%;
height: 100%;
max-width: 140px;
max-height: 60px;
}
.range-title {
color: darkblue;
}
/* Main Content */
article {
padding: 40px;
}
article img {
width: 100%;
height: 100%;
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
}
article p {
font-size: 16px;
}
/* Sports Icons */
.sports-icon-list {
background-color: #333;
padding-bottom: 40px;
}
.sports-icon-list a {
color: white;
}
.sports-icon-list a h6 {
margin-top: 2px;
margin-bottom: 14px;
}
.sports-icon-list img {
width:70px;
height:70px;
}
.sports-list-top div {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sports-list-top a {
margin-left: 30px;
margin-right: 30px;
display: inline-block;
}
/* Authos Comment */
/*@media (max-width: 767px) {
.range-list a {
display: block;
}
.range-list img {
width: 33%;
height: 33%;
margin-right: 10px;
margin-bottom: 30px;
}
.range-list h4 {
display: inline;
}
}*/
答案 0 :(得分：0)
正如我在评论中所说，.col-md-*适用于大众> = 768，因此对我来说看起来是正确的。参见here。
返回您的代码，您需要将网格类上一层。另外，为了使.order-*有效，您必须使用数字（请参见here）。尝试如下编辑您的课程：
<section class="col-md-9 col-lg-8 order-md-11 order-lg-1">...</section>
<aside class="col-md-3 col-lg-2 order-md-1 order-lg-11">...</aside>
<aside class="sports-icon-list col-xs-12 col-lg-2 order-md-12 order-lg-12">...</aside>
检查更新的Fiddle