Looks awfull on smartphone!!

try to use a @media query to overwrite the width of the columns;

example:

@media screen and (max-width: 600px) {
   #magazine-columns .column { width: 100%; }
}

your ‘Not even with’ CSS has invalid syntax –

would need to be:

#magazine-columns .column.c3 { width: 100%; }

unfortunately you seem to have removed the edits so I have no way to check why it might not be working for you.

where exactly did you add the changes?

general caveat:
do not edit Twenty Twelve directly – the customisations will be lost when you upgrade the theme – rather create a child theme to work with (for changes to the templates) or use a custom CSS plugin (for formatting chnages only).

I found this in style.css:

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) 

#magazine-columns .column.c3 { width: 100%; }

{

that cannot work.

that is not how my suggestion http://wordpress.org/support/topic/looks-awfull-on-smartphone?replies=5#post-4320903 was intended;
a: the suggested code has to use ‘max-width’;
b: carefully check how the brackets need to be opened and closed for the @media query.

try to locate the broken section:

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) 

	#magazine-columns .column.c3 {
	max-width: 100%;
	}
	.author-avatar {

and repair it to look like:

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {

then add the suggested style at the very bottom of style.css:

@media screen and (max-width: 600px) {
   #magazine-columns .column.c3 { width: 100%; }
}

and remember to clear the browser cache…

you are welcome 😉

– once you know what to change where, it is easy.