如何在不同设备上连续显示固定数量的图像

Question

我连续有一组图像，我希望它们在lg设备上显示为4张图像，在sm和md设备上显示为2张图像，但是我对如何使用网格来实现这一点感到困惑。 这是我的引导code.you可以看到效果了这里的技能section.when你调整屏幕SM图像采取屏幕的完整宽度，

如何使它们仅占宽度的50％，以便连续显示2张图像。

 img{ height: 200px; } 

 <div class="row pr-3 pt-1 pl-3 pb-3"> <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">grid1 </h5> </div> </div> <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">grid2</h5> </div> </div> <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">grid3</h5> </div> </div> <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">grid4</h5> </div> </div> </div> 

Answer 1

将网格类从col-md-3替换为col-md-6