左にdivを配置する方法、モバイルモードで下に配置する方法はありますか？

Question

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

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <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"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
    </div> 
 
    <div class="col-md-9 col-xs-9"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg" > 
 
    </div> 
 
</div>

私は左の製品のプレビュー画像のためのdivとメインプレビュー用の別のdivを持っています。私が望むのは、左側のプレビュー画像は、モバイルモードのメインプレビューの一番下に表示されます。あなたは何をするべきか、何かのCSSトリックを私にアドバイスできますか？

Answer 1

これを達成するために、メディアクエリによってflex-direction属性を変更することができます。

それは私がブートストラップを使用するのでしばらくして、しかしここでバニラ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>