Question

＆＃13;

.preview img {
   width: 113px;height: 113px;margin-bottom: 6px;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-6 col-sm-6 col-xs-12">
   <div class="row">
      <div class="col-md-3 col-xs-3 preview">
	<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
	<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
	<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
   </div>
   <div class="col-md-9 col-xs-9">
	<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg" >
   </div>
</div>

＆＃13;

我有一个div用于左边产品的预览图像，另一个div用于主预览。我想要的是左侧的预览图像将位于移动模式下主预览的底部。你能告诉我该做什么或一些css技巧吗？

Answer 1

您可以根据媒体查询更改flex-direction属性以实现此目的。

我使用bootstrap已经有一段时间了，但这里有一个vanilla css示例：

.wrapper {
  display: flex;
  flex-direction: row;
}

@media only screen and (max-width: 750px) {
  .wrapper {
    flex-direction: column-reverse;
  }
}

<div class="wrapper">
  <div>links</div>
  <div>rechts</div>
</div>

如何让div位于左侧，在移动模式下位于底部？

1 个答案: