Making a responsive site with divs that create two columns on homepage - responsive-design

Question

Is is possible to program my site in such a way that these two columns of posts on the homepage will also display as two columns on a smart phone? I'm using a twenty twelve child theme, which is a responsive theme, but the code I used to create the two columns of posts is pretty elementary, so it's just combining into one column on a smart phone.
below is an excerpt of code from my index.php that shows the way i'm creating the two columns. these divs also correspond with simple CSS in my style.css file
i'd gladly take a different approach to creating the columns if it allows them to show as two independent columns on a smart phone as well.
the site is at: internalcompass.us/castle if you want to look at the page
thanks
</div>
<div id="right-column">
<?php $my_query = new WP_Query('category_name=favorites');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
</div>
<div id="left-column">
<?php $my_query = new WP_Query('category_name=Recents');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
</div>

Answer 1

Change your right-column and left-column from a width of 270px to a width of 50%. Then when your window is above 600pixels (most modern phones), you'll still see two columns.
I.e. edit your style.css (not the main theme style.css) and change:
div#left-column {
width: 270px;
float: left;
clear: none;
}
div#right-column {
width: 270px;
float: right;
clear: none;
}
to:
div#left-column {
width: 50%;
float: left;
clear: none;
}
div#right-column {
width: 50%;
float: right;
clear: none;
}
though you may want to add a little padding/margin room after doing this.
Is that what you're looking for?