我不明白为什么我的推拉不起作用。 >= col-sm上的顺序正确。当我要去col-xs时，我希望顺序更改如下：
sm：| A | B | C |
在我添加push-pull demopage之前。
添加push-pull demopage后。
这两个演示站点之间的唯一区别是我添加了：push / pull
在col标签上。
有人在这里看到我在做什么错吗？
#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>