Nesting Columns

Hi,
I was wondering if someone could help me with nesting columns. I have three rows of 6 images added in the style.css below the header widgets on the home page. Since page width is 12 columns, each image is 2 columns. I have tried several ways to make them nest nicely when shrinking the page, but have not found the right code. First, I just aligned 6 images in one row, each with row width c2. These looking nice and shrunk and expanded nicely, but all collapsed into one row after a certain page width when they could easy have stacked.

Then I started with codes like the below, splitting each row into sections, first 2 sections of 6 columns, then 3 of 4, as below.

<div class="grid">
			<div class="row">
				<div class="c6">
					<div class="row">
						<div class="c4"><a href="https://www.wwf.or.id/" target="_blank"><img src="/wp-content/uploads/client-logos/WWF.png"/></a>
						</div>
						<div class="c4 end"><img src="/wp-content/uploads/client-logos/EXPO.png"/></a>
						</div>
						<div class="c4 end"><a href="https://www.umn.ac.id/" target="_blank"><img src="/wp-content/uploads/client-logos/Client-List-v1_01.jpg"/></a>
						</div>
					</div>
				</div>
				<div class="c6 end">
					<div class="row">
						<div class="c4"><a href="https://www.wwf.or.id/" target="_blank"><img src="/wp-content/uploads/client-logos/WWF.png"/></a>
						</div>
						<div class="c4 end"><img src="/wp-content/uploads/client-logos/EXPO.png"/></a>
						</div>
						<div class="c4 end"><a href="https://www.umn.ac.id/" target="_blank"><img src="/wp-content/uploads/client-logos/Client-List-v1_01.jpg"/></a>
						</div>
					</div>
				</div>
			</div>
		</div>

but they do not expand to maximum width when nested, and at the same page width as before they all jump into one small column. I would like for the mobile users not to see 18 rows of one large icon, but perhaps 6 rows of 3 small ones. Please advise me, I would really endlessly appreciate it. Thanks so much! – Anthony