safariでflexboxレイアウトが実現できない。

Question

こちらの記事を参考にし、レスポンシブ対応しているホームページ制作をしたいと思っております。
http://guide.withabout.net/guide/gp332/459917/flexlayout-a.html

こちらにdisplay:-webkit-flex;と
order部分に-webkit-order:1; を付け加えて
下記のように記述したのですが、
safariで確認しても実際に反映されていません。
どうすればsafariでも反映されるようになるでしょうか。
よろしくお願い致します。

                  /* ------------------------------------ */
		/* ▽モバイル用（デフォルト）の表示順序 */
		/* ------------------------------------ */
		.contents {
      display:-webkit-flex;/*--- safari（PC）用 ---*/
			display: flex;
			flex-direction: column;	/* 縦並びに */
		}
		#main  { -webkit-order:1; order: 1; }	/* main を先頭に配置 */
		#sideB { -webkit-order:2;   order: 2; }	/* sideBを2番目に配置 */
		#sideA { -webkit-order:3;   order: 3; }	/* sideAを最後に配置 */

		/* --------------------------------------------- */
		/* ▽広い画面用の表示順序（横幅641px以上で採用） */
		/* --------------------------------------------- */
		@media all and (min-width: 641px) {
			.contents {
                display:-webkit-flex;/*--- safari（PC）用 ---*/
				display: flex;
				flex-direction: row;	/* 横並びに */
			}
			#sideA {-webkit-order:1; order: 1; width: 25%; }	/* sideAを左端に幅25%で配置 */
			#main  {-webkit-order:2 ;order: 2; width: 50%; }	/* main を中央に幅50%で配置 */
			#sideB { -webkit-order:3 order: 3; width: 25%; }	/* sideBを右端に幅25%で配置 */
		}

		/* ------------------ */
		/* ▽各ブロックの配色 */
		/* ------------------ */
		header { background-color: #0000cc; color: #ffffff; margin:0; padding:1em; }
		footer { background-color: #cc0000; color: #ffffff; margin:0; padding:1em; }
		#main  { background-color: #ffffcc; margin:0; padding:1em; }
		#sideA { background-color: #ccccff; margin:0; padding:1em; }
		#sideB { background-color: #ffcccc; margin:0; padding:1em; }
		h1,h2 { margin:0; padding: 0; border-bottom: 1px dashed #a0a0a0; }

Answer 1

確認に使用しているSafariのバージョンは何でしょうか？
最新バージョンでしょうか？
幅にwidthではなく、flex-basisを使ってみてはいかがでしょうか。

Answer 2

こちらで確認した所、掲載されているCSSで問題なくSafariでも表示されているようです。
HTML側のマークアップに問題があるとか、ここに掲載されていない別の箇所に問題がある可能性もありますが、
本当にSafariだけ表示がおかしい状態ですか？他のブラウザも全て同じだったりしませんか？

Comments

[pota]

ありがとうございます。
返信が遅れ、すみません。
ios9のsafariでは確認できるのですが、それまでだと表示が崩れてしまいます。
それ以前でも表示できる手段はないでしょうか。
もしあったら教えていただきたいです。
よろしくお願いします。