displaying columns on phone in responsive 2012 theme

hi,

I’m using the twentytwelve theme, a child theme, and I’ve added two columns on the homepage using simple divs. I’ll paste that code below.

I know twenty twelve is a responsive theme, but I need to modify its behavior for my design when viewed on the iphone. Right now on an iphone, for the homepage it just shows one column of posts, rather than two columns.

internalcompass.us/castle

When you view this site on your phone, I just want it to just show a smaller version of the normal page you see on the computer.. Similar to how this person’s site does: https://www.leeabbamonte.com/

A sidenote: I am not going to show the excerpts of text on the homepage ultimately. I just haven’t figured out how to remove the excerpts with messing up content.php.

— someone recommended I look into media queries, but after reading online I’m still not sure how to use them to address this q.

Thanks for any info

div#left-column {
	width: 47%;
	float: left;
	clear: none;
	}
div#right-column {
	width: 47%;
	float: right;
	clear: none;
	}