关于以下网页，我有以下两个问题：
为了实现Title 1。元素的不同放置，我实现了两次，具有不同的可见性。有没有办法在没有这种重复的情况下实现相同的布局？
在中型和大型屏幕上标题为 1。（在h1内实施为div）和数字 3的框。（通过另一个thumbnail中的div实施）未在顶部对齐。是什么导致它并且有解决方法？
我正在实施以下结构：
代表xs和sm：
+-----------+
| 1. |
+-----------+
+------------+ +----------------+
| | | |
| 2. | | 3. |
| | +----------------+
+------------+
代表md和lg：
+------------+ +-----------+
| | | 1. |
| 2. | +-----------+
| | +----------------+
+------------+ | |
| 3. |
+----------------+
我的HTML ：
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="hidden-md hidden-lg">
<h1>Title</h1>
</div>
<div class="col-xs-6">
<div class="thumbnail"><p>1--<br>2--<br>3--<br>4--<br>5--<br>6--</p></div>
</div>
<div class="col-xs-6">
<div class="col-lg-12">
<div class="hidden-sm hidden-xs" >
<h1 >Title</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
</div>
<div class="col-xs-4"> </div>
<div class="col-xs-4"> </div>
<div class="col-xs-4"> </div>
</div>
</div>
<!-- Latest compiled and minified JavaScripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：2)
一种方法是使用像这样的浮点类（pull-left，pull-right）..
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 pull-right">
<h1>Title</h1>
</div>
<div class="col-xs-6 pull-left">
<div class="thumbnail"><p>1--<br>2--<br>3--<br>4--<br>5--<br>6--</p></div>
</div>
<div class="col-xs-6 pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
</div>
修改 的
这会将标题移到顶部，使其与缩略图DIV对齐：
.title h1 {
margin-top:0;
}
要仅在md和lg上应用此功能，您需要使用..
@media (min-width: 992px){
.title h1 {
margin-top:0;
}
}