我创建了一个使用HTML的图库包含一行包含三列，如Picture所示，然后我尝试启动我的媒体查询第二和第三列是好的，但我有一个问题，在第一列包含6张图片，我想每行制作2张图片，当我制作wrap时，我得到了shape。
所以，如果有人可以告诉我，我应该在我的代码中添加什么来调整媒体查询中的库，下面是我试图简化它的代码，这样你就可以快速阅读...我是新来的小组所以请原谅我的写作并解释问题。 在此先感谢您的支持。
/* Break Point 2 */
/* for small screens*/
@media (min-width:768px) and (max-width:991px) {
/* projects */
#galleryTab {
width: 100%;
font-size: 8px;
font-weight: normal;
}
#col1 {
max-width: 52%;
margin-right: 5px;
display: flex;
flex-wrap: nowrap;
}
#col2 {
max-width: 52%;
}
}<!-- Start Projects here -->
<div class="row">
<!-- First Column -->
<div class="column" id="col1">
<!-- 1- -->
<div class="container class1" style="position: relative; width: 100%;">
<a class="fancybox" href="images/projects/1_saif1/s11.jpg" data-group="gallery" data-filter="vil" rel="vil1" title="Private Villa (G+1)"><img src="images/projects/thumbnails/1.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 2- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/2_dic/dic1.jpg" data-group="gallery" data-filter="ware" rel="ware1" title="Office and Open Shed"><img src="images/projects/thumbnails/2.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 3- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/3_sharjah_sport/rec1.jpg" data-group="gallery" data-filter="int" rel="int1" title="Sharjah Sports Club"><img src="images/projects/thumbnails/3.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 4- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/4_saif2/s21.jpg" data-group="gallery" data-filter="vil" rel="vil2" title="G+1 Private Villa"><img src="images/projects/thumbnails/4.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 5- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/5_jarwan/j1.jpg" data-group="gallery" data-filter="vil" rel="vil3" title="G+1 Private Villa"><img src="images/projects/thumbnails/5.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 6- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/6_soccer_school/soccer1.jpg" data-group="gallery" data-filter="res" rel="res1" title="Soccer School Sharjah"><img src="images/projects/thumbnails/6.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- End of First Column -->
<!-- Second Column -->
<div class="column" id="col2">
<!-- 7- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/7_shrajah_retail/retail1.jpg" data-group="gallery" data-filter="res" rel="res2" title="Sharjah Retail"><img src="images/projects/thumbnails/7.jpg" width="380" height="239" alt="" /></a>
<div class="overlay">
<div class="text">Sharjah Retail</div>
</div>
<div class="hidden">
<a class="fancybox" href="images/projects/7_shrajah_retail/retail2.jpg" rel="res2"><img src="images/projects/7_shrajah_retail/retail2.jpg" alt="retails" /></a>
</div>
</div>
<!-- 8- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/8_dubailand/dubailand1.jpg" data-group="gallery" data-filter="res" rel="res3" title="G+11 Residential Building"><img src="images/projects/thumbnails/8.jpg" width="380" height="483" alt="" /></a>
<div class="overlay">
<div class="text">G+11 Residential Building</div>
</div>
<div class="hidden">
<a class="fancybox" href="images/projects/8_dubailand/dubailand2.jpg" rel="res3"><img src="images/projects/8_dubailand/dubailand2.jpg" alt="residential_building" /></a>
</div>
</div>
<!-- 9- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/9_sharjah_shops/shops1.jpg" data-group="gallery" data-filter="res" rel="res4" title="Sharjah Shops"><img src="images/projects/thumbnails/9.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 10- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/10_shrjah_hotel/h1.jpg" data-group="gallery" data-filter="int" rel="int2" title="Hotel Interior Design"><img src="images/projects/thumbnails/10.jpg" width="380" height="239" alt="" /></a>
<div class="overlay">
<div class="text">Hotel Interior Design</div>
</div>
</div>
<!-- 11- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/11_swidi/sw1.jpg" data-group="gallery" data-filter="vil" rel="vil4" title="Ground Only Private Villa"><img src="images/projects/thumbnails/11.jpg" width="380" height="239" alt="" /></a>
</div>
</div>
<!-- End of Second Column -->
<!-- Third Column -->
<div class="column" id="col3">
<!-- 12- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/12_alhamadi/hama1.jpg" data-group="gallery" data-filter="vil" rel="vil5" title="Private Villa (G+1)"><img src="images/projects/thumbnails/12.jpg" alt="" width="380" height="239" id="h1016" /></a>
</div>
<!-- 13- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/13_ali/ali1.jpg" data-group="gallery" data-filter="vil" rel="vil6" title="Private Villa (B+G+1)"><img src="images/projects/thumbnails/13.jpg" width="380" height="239" alt="" /></a>
<div class="overlay">
<div class="text">Private Villa (B+G+1)</div>
</div>
</div>
<!-- 14- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/14_alowais/living1.jpg" data-group="gallery" data-filter="int" rel="int3" title="Private Villa Interior Design"><img src="images/projects/thumbnails/14.jpg" width="380" height="239" alt="" /></a>
</div>
<!-- 15- -->
<div class="container class1" style="position: relative; width: 100%">
<a class="fancybox" href="images/projects/15_ajman/Ajman1.jpg" data-group="gallery" data-filter="res" rel="res5" title="G +8 Pdoium +22 Typ. Residential Building"><img src="images/projects/thumbnails/15.jpg" width="380" height="727" alt="" /></a>
</div>
</div>
<!-- End of Third Column -->
</div>
<!-- Row End here and Projects as well -->