プロパティの記述が間違っていたので修正

-webkit-display: flex; を display: -webkit-flex; と修正

Flexboxを使ってレスポンシブなサイトを作る

sample.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>サンプル</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>Header</h1>
    </div>

    <div id="content">
      <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
    </div>

    <div id="side-menu">
      <ul>
        <li><a href="">side-link1</a></li>
        <li><a href="">side-link2</a></li>
        <li><a href="">side-link3</a></li>
        <li><a href="">side-link4</a></li>
        <li><a href="">side-link5</a></li>
      </ul>
    </div>

    <div id="footer">
      <ul>
        <li><a href="">footer-link1</a></li>
        <li><a href="">footer-link2</a></li>
        <li><a href="">footer-link3</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

style.css


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  width: auto;
}

li{
  list-style: none;
}

#wrapper{
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  background: #555555;

  display: flex;
  display: -webkit-flex;

  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}

#header{
  background: green;

  order: 1;
  -webkit-order: 1;

  flex-basis: 100%;
  -webkit-flex-basis: 100%;
}

#side-menu{
  background: yellow;

  order: 2;
  -webkit-order: 2;

  flex-basis: 20%;
  -webkit-flex-basis: 20%;
}

#content{
  background: red;

  order: 3;
  -webkit-order: 3;

  flex-basis: 80%;
  -webkit-flex-basis: 80%;
}

#footer{
  background: pink;

  order: 4;
  -webkit-order: 4;

  flex-basis: 100%;
  -webkit-flex-basis: 100%;
}

#footer ul{
  display: flex;
  display: -webkit-flex;

  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;

  justify-content: space-around;
  -webkit-justify-content: space-around;
}

/* mobile */
@media screen and (max-width: 768px){
  #side-menu{
    order: 3;
    -webkit-order: 3;

    flex-basis: 100%;
    -webkit-flex-basis: 100%;
  }

  #content{
    order: 2;
    -webkit-order: 2;

    flex-basis: 100%;
    -webkit-flex-basis: 100%;
  }
}

サンプル画像

画面サイズ 769px以上

画面サイズ 768px以下

プロパティについて

flex-flow

flex-direction
Flexboxアイテムの配置方向

flex-wrap 折り返し設定
FlexboxアイテムのサイズがFlexboxコンテナーのサイズを超えたときアイテムをどのように表示するか設定する

flex-wrap: nowrap;
nowrapは初期値です。折り返さないで一行で表示します

flex-wrap: wrap;
折り返して複数行で表示します

flex-flowを使うことでflex-directionとflex-wrapをまとめて記述するこができます

flex-flow: row wrap;
左から右に配置しサイズが超えたら複数行にして表示する

order

Flexboxアイテムの順番を指定することができます

基本はhtmlの記述した順になっていますから
(1)header → (2)content → (3)side-menu → (4)footer
となりますがorderでcontentとside-menuの順番を入れ替えています

順番を変えることで配置を調整しています。

flex-basis

Flexboxアイテムのサイズを指定できる

ブラウザ

Google Chrome バージョン41
Firefox バージョン37
IE11
で試しました

Google Chrome最新版とFirefox最新版, IE11は正常に表示されます。
Safariは -webkit-をつけると動きます

Operaは未確認です

CSS3のFlexboxを使ってレスポンシブなサイトを作ってみた