Bootstrap asp.net使用Multiview显示移动视图

Question

这是我使用bootstrap的代码，图像将根据大小进行相应更改。

<div class="container-fluid">
 <div class="row" >
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">  
    <img class="img-responsive" src="images/loginimage.jpg" />    <!--Mobile-->
</div>
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg">
    <img class="img-responsive" src="images/loginimage.jpg" />   <!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-12 hidden-lg">
    <img class="img-responsive" src="images/loginimage.jpg" />   <!--Desktop-->
</div>

<div class="hidden-xs hidden-sm hidden-md col-lg-12" id="img">     
      <img class="img-responsive" src="images/loginimage.jpg" />  <!--Large-->          
 </div>      

有人可以教我如何添加Multiview，以便Large和Desktop，Multiview可以在图像的中心，当它变成Tab或Mobile时，Multiview将在图像的正下方？

我知道我可以在每个尺寸中添加一个Multiview，但我只想添加一个Multiview，这样我就可以在Multiview上只做一个代码而不是每个Multiview。

桌面/大视图：

移动/标签视图：

Answer 1

试试这个：

<style type="text/css">
	/*You may or may not need to set width and height in this css class it will depend upon your image sizes*/
	.lg-multiview {
		width: 200px;
		height: 200px;
		top: 35%;
		left: 35%;
		position: absolute;
		z-index: 1;
	}
</style>

<div class="container-fluid">
	<div class="row">
		<!--Mobile--><!--Tab-->
		<div class="col-sm-12  hidden-md hidden-lg">
			<img class="img-responsive" src="~/images/img.jpg" />
			<img class="img-responsive" src="~/images/multiview.jpg" />
		</div>
	</div>
	<!--Desktop--><!--Large-->
	<div class="hidden-xs hidden-sm col-md-12">
		<img class="img-responsive lg-multiview" src="~/images/multiview.jpg" />
		<img class="img-responsive" src="~/images/img.jpg" />
	</div>
</div>