我使用的是引导网格系统，我试图在宽窗口(桌面、平板电脑(和窄窗口(移动屏幕(上获得正确的视图。
我想要在宽屏幕上显示的是：
[image 1][image 2][text 1]
[image 3][image 4][text 2]
在手机上我想看到这个：
[image 1][image 2]
[image 3][image 4]
[text 1] [text 2]
我目前在移动或窄桌面窗口上得到的是：
[image 1][image 2]
[text 1]
[image 3][image 4]
[text 2]
这是一个jsfiddle链接。代码也在下面：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
</div>
<div class="col-xs-4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
</div>
<div class="col-md-3 border border-primary">
some text.........
</div>
</div>
<div class="row">
<div class="col-xs-4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
</div>
<div class="col-xs-4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
</div>
<div class="col-md-3 border border-primary">
some text.........
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
您可以将css用于文本
position:absolute;
并更改位置文本。或者创建一个div并放入文本并设置显示：当屏幕更改为移动时，设置显示和隐藏默认文本。