如何使图像网格响应？

Question

I'm pretty new to html/css, so please forgive me if this is a silly question. Basically, on my homepage I have several image grid icons which are hyperlinked to other pages on my site. I'm really struggling to make it responsive though, if anyone could help me make it responsive that would be great!

Here's my HTML and CSS. Please let me know anything I may be doing wrong!

 <a href="page1.html"> <div id="bor_panel"> <img src="page1.jpg"> <span>Page 1</span> </div> </a> <a href="page2.html"> <div id="bor_panel"> <img src="page2.jpg"> <span>Page 2</span> </div> </a> <a href="page3.html"> <div id="bor_panel"> <img src="page3.jpg"> <span>Page 3</span> </div> </a> <a href="page4.html"> <div id="bor_panel"> <img src="page4.jpg"> <span>Page 4</span> </div> </a> <a href="page5.html"> <div id="bor_panel"> <img src="page5.jpg"> <span>Page 5</span> </div> </a> <a href="page6.html"> <div id="bor_panel"> <img src="page6.html"> <span>Page 6</span> </div>

 #bor_panel { font-family: 'Bebas Neue', cursive; font-size: 2em; border-radius: 12px; border: 2px solid #000;s float: left; margin-top: 10px; margin-left: 16px; margin-right: 16px; width: 270px; height: 270px; display: flex; flex-direction: column; align-items: center; padding-left: 5px; padding-right: 5px; justify-content: space-between }

Answer 1

this class will do it add it up:

img-fluid        --Bootstarp3
img-resposive    --Bootstarp4