Flexable columns in Safari and iPhone Chrome

[KeredDrahcir]

I am trying to create a mobile responsive template. I am using the CSS media to find the browser width and it's working fine in most cases.
I want however on a device where the left column will take up too much space for it to jump below the main content on the right.

The solution to get the left down was to use flexible columns to reverse the flow.
This works fine in Firefox, Google Chrome, Internet Explorer and Opera on a desktop.
It doesn’t work on Google Chrome on an iPhone and doesn't work in Safari either on a desktop or iPhone. In both cases the left column appears above the right column.
It works on my friend's Android.

This is the html:

<div id="content">
       	<div class="left">
       		LEFT CONTENT
	</div>

	<div class="content">
		MAIN CONTENT
	</div>
</div>

The CSS that sets the values for these blocks on screens of 980 pixels and larger:

#content {
	clear: both;
	margin: 0 auto;
	width: 980px;
	display: inline-block;
	min-height: 600px;
}

.content {
	float: left;
	min-height: 500px;
	padding: 10px 10px 0 10px !important;
	width: 742px !important;
}

.left   {
	float: left;
	padding: 10px 2px 0 10px !important;
	width: 202px !important;
}

The code which control the columns at the correct browser size is:

   

@media (max-width: 632px) {
#content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
   .content { width:583px !important; min-height: 0;}
   .left { width:583px !important;}
}

Any help would be much appreciated.

[KeredDrahcir]

Can't anyone help me?