I'm struggling with my code and need some help. I've been editing it, but things seem to be getting worse instead of better. Specifically, I can't figure out how to set up my container, row, and columns in Bootstrap properly. My site uses cards with images and looks fine on desktop, but the layout breaks on mobile screens. Instead of scaling down to show one or two cards at a time, users have to scroll to see all the images. Any tips or suggestions would be greatly appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content="breweryfx, Lancaster PA, best, beer, beer collectibles, bar, brewery, ale, lager, signs, trays, bottles, cans, coasters, labels" />
<meta name="description" content="Buying and selling the best beer collectibles in Lancaster PA">
<title>BreweyFX - Lancaster, PA</title>
<!-- Rest of the head section omitted for brevity -->
</head>
<body>
<header>
<p>Content inside the header...</p>
</header>
<section>
<p>Main content here...</p>
</section>
<footer>
<p>Footer information...</p>
</footer>
</body>
</html>
/* Additional CSS and other HTML files included as well */