如何在bootstrap 3网格中更改窗口大小的列顺序？这是我试图获得的图像：
Change bootstrap order on window resize
问题解决了！码：
<div class="row">
<div class="col-lg-2 col-md-6 col-xs-6">Box1
</div>
<div class="col-lg-2 col-lg-push-8 col-md-6 col-xs-6">Box2
</div>
<div class="col-lg-8 col-lg-pull-2 col-md-12 col-xs-12">Box3
</div>
</div>
您可以为不同的窗口大小添加多个类。在本地html文件中使用此代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-lg-4 col-md-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-lg-4 col-md-6" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-lg-4 col-md-12" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>