bootstrapのグリッドシステムでスマホの時は画像を縦並び、パソコンの時は画像を横並びにして表示したいです。

bootstrapのグリッドシステムについての質問です。
レスポンシブデザインを作りたく思い、グリッドシステムを使用しています。
ラップトップの時にだけ画像を2枚横並びにして表示させたいのですが、うまく表示されません。
現在、モバイルサイズの場合だと画像のサイズがwidth20px、height15pxになって横並びで表示されております。モバイルサイズの場合は縦並びで表示したいのです。
そして、laptopのサイズに変えてみると130px、86pxで表示され、画面の左に非常に小さいサイズで表示されるのが現状です。

html
1<div class="container">
2            <div class="row">
3               <figure class= "col-12 col-sm-6">
4                  <img src="./img/dinner1.jpg" alt="当店人気NO.1セット『こってり魚介醤油ラーメンと肉ゴロゴロチャーハン』"  style ="max-width:100%" width:"100%" height:"auto" >
5                     <figcaption class="popular">当店人気NO.1セット『こってり魚介醤油ラーメンと豚肉ゴロゴロ炒飯』</figcaption>
6               </figure>
7               <figure class= "col-12 col-sm-6">
8                  <img src="./img/dinner2.jpg" alt = "食後にいちおし！極冷えさっぱり冷麺"  style ="max-width:100%" width:"100%" height:"auto"> 
9                  　　<figcaption class = "popular">食後にいちおし！極冷えさっぱり冷麺</figcaption>
10               </figure>
11             </div>
12</div>