我正在使用 Bootstrap3<nav>，在示例代码中，团队使用navbar-toggle collapsed类来折叠小屏幕上导航栏中的元素。
我的问题是折叠时如何更改它们的顺序？ 我做了一个简短的片段：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</nav>
</body>
</html>
澄清一下，在我的<nav>中，从左到右有一个列表，一个图像，另一个列表。当它们在小屏幕上折叠时，顺序将从上到下，列表，图像和列表。折叠时如何将图像放在顶部？
最简单的方法是创建品牌 html 两次，并使一个在 xs 上可见，另一个在 xs 上隐藏。
为此，可以将visible-xs类和hidden-xs类添加到要在导航栏折叠时可见或隐藏的容器。
通过这样做，您可以在两个地方显示品牌形象，而无需添加任何JavaScript。
- 代码笔演示
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="dropdown">
<div class="navbar-header visible-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
</ul>
</li>
</ul>
<div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi! User<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"> Profile</a></li>
<li><a href="#"> Feedback</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"> Log Out</a></li>
</ul>
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>