我无法理解为什么我的推拉功能不起作用。在
>= col-sm上的顺序是正确的。当我到达col-xs时，我希望顺序像下面这样改变：
sm : | A | B | C |
< xs : | C | A | B |
在添加push-pull之前 demopage。
添加push / pull后 demopage。
这两个演示网站之间唯一的区别是我在col标签上添加了：push / pull。
有人能看出我做错了什么吗？
#content{
background:#ffffff;
}
.hr-spacing {
margin-top: 10px;
margin-bottom: 10px;
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
background-color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section id="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-push-3">
<div class="panel">
<div class="panel-heading">
<h3><i class="icon-pushpin main-color"></i>A</h3>
</div>
<div class="panel-body">
<address>
<strong>Company name</strong><br/>
Stackroad 1<br/>
1234 London<br/>
<i class="icon-phone-sign"></i><a href="tel:+4512345678"> + 45 12345678</a><br/>
<i class="icon-phone-sign"></i><a href="mailto:info@companyname.com"> info@companyname.com</a>
</address>
</div>
</div>
<div class="panel hidden-xs">
<div class="panel-heading">
<h2>A.A</h2>
</div>
<div class="panel-body">
<a href="da-dk/#">Link 1</a><hr class="hr-spacing"/>
<a href="#">Link 2</a><hr class="hr-spacing"/>
<a href="/da-dk/page/#">Link 3</a><hr class="hr-spacing"/>
<a href="/da-dk/page/#">Link 4</a><hr class="hr-spacing"/>
<a href="/da-dk/page/#">Link 6</a><hr class="hr-spacing"/>
<a href="/da-dk/page/#">Link 6</a><hr class="hr-spacing"/>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-push-9">
<div class="panel">
<div class="panel-heading">
<h2>B</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, imperdiet leo id quis est, blandit velit eget natoque pulvinar porttitor aliquam, vehicula vitae. Ipsum a amet diam. Aliquam elit lorem justo, libero gravida, nunc wisi facilisis vestibulum enim vitae pretium, suspendisse fringilla et interdum convallis ut vestibulum. Rhoncus massa lectus suspendisse ultrices, parturient ac eget ligula scelerisque lacus tortor,</p>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-pull-4">
<div class="panel">
<div class="panel-heading">
<h3><i class="icon-time main-color"></i>C</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Call us</th>
<th>Write us</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="tel:+4512345678">+ 45 12 34 56 78</td>
<td><a href="mailto:info@company.dk">info@company.dk</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Dag</th>
<th>Tidspunkt</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Mandag</td>
<td>8:00 - 16:00</td>
</tr>
<tr class="success">
<td>Tirsdag</td>
<td>8:00 - 16:00</td>
</tr>
<tr class="success">
<td>Onsdag</td>
<td>8:00 - 16:00</td>
</tr>
<tr class="success">
<td>Torsdag</td>
<td>8:00 - 16:00</td>
</tr>
<tr class="warning">
<td>Fredag</td>
<td>8:00 - 15:00</td>
</tr>
<tr class="danger">
<td>Lørdag</td>
<td>Lukket</td>
</tr>
<tr class="danger">
<td>Søndag</td>
<td>Lukket</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Driftstatus</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="dot"></span> Normal drift</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>