レスポンシブデザインでメニューを画面上部に表示したい。

Webページ作成初心者です。
現在サイトを作成しているのですが、pc表示では右に表示しているメニューをスマホなどの画面サイズが小さい時にだけ最上部に持ってきたいと考えております。
イメージとしては、スクロールしても常に最上部へ表示されているような固定式ではなく、ただ右メニュー(2カラム？)を1カラムに変更したいという感じです。
調べてもよくわからなかったので、どなたか良い方法がありましたら教えていただけるとありがたいです。
先にも申し上げましたが、初心者につきhtml、cssともにおかしな記述をしていたらすみません。
よろしくお願いいたします。

●HTML●

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="sstemp2.css">
  <title>template sample</title>
</head>
  <body>
    <div id="wrapper">
      <div id="top">
        <h1>Web Site Title</h1>
        <p>サイトの説明など</p>
        <div class="textarea">
          <h3>What's new</h3>
          <textarea>
更新履歴など
2018/01/22　novel追加
2018/01/19　novel追加
2018/01/13　bookmark追加
          </textarea>
        </div>
      </div>
      <div id="menu">
        <img src="img/circus1-7.png">
        <ul class="menu-list">
          <li><a href="#about">about</a></li>
          <li><a href="#main">main</a></li>
          <li><a href="#bookmark">bookmark</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
    </div>
    
<!--    ここからコンテンツ-->
    <div id="contents">
      <div id="about">
        <h2>about</h2>
        <p>シンプルなテンプレート。</p>
      </div>
      <div class="up"><a href="#">△</a></div>
      <div id="main">
        <h2>main</h2>
        <p>メインページになります。</p>
        <p>別ページサンプルは<a href="page-sample.html">こちら</a></p>
      </div>
      <div class="up"><a href="#">△</a></div>
      <div id="bookmark">
        <h2>bookmark</h2>
        <div class="bookmark-list">
          <a href=""><img src="img/nobanner1.gif"></a>
          <p>サイト名、説明文など</p>
        </div>
        <div class="bookmark-list">
          <a href=""><img src="img/nobanner1.gif"></a>
          <p>サイト名、説明文など</p>
        </div>
        <div class="bookmark-list">
          <a href=""><img src="img/nobanner1.gif"></a>
          <p>サイト名、説明文など</p>
        </div>
      </div>
      <div class="up"><a href="#">△</a></div>
      <div id="contact">
        <h2>contact</h2>
        <p>お名前</p>
        <input>
        <p>お問い合わせ内容</p>
        <textarea></textarea>
        <p><input type="submit"></p>
      </div>
      <div class="up"><a href="#">△</a></div>
    </div>
<!--    ここまでコンテンツ-->
    
<!--ここからコピーライト(消さないで下さい)-->
    <div id="copyright">
    </div>
<!--ここまでコピーライト(消さないで下さい)-->
  </body>
</html>

●CSS●

@charset "utf-8";

/*ここから全体レイアウト*/

* {
  box-sizing: border-box;
}

body {
  font-size: 15px;
  color: rgb(155,155,155);
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ＭＳ ゴシック', sans-serif;
  font-weight: 500;
}

body a {
  color: rgb(110,110,110);
  text-decoration: none;
}

body a:hover {
  background-color: rgb(222,222,222);
}

body h1,h2,h3 {
  color: rgb(110,110,110);
}

body p {
  margin: 1px;
  padding: 0;
}

input {
  width: 200px;
}

textarea {
  width: 300px;
  height: 100px;
}

/*ここまで全体レイアウト*/


#wrapper {
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 30px 30px;
  box-shadow: 0px 0px 10px rgb(155,155,155);
  border: solid 1px rgb(155,155,155);
  border-radius: 10px;
  overflow: hidden;
}

#top {
  float: left;
}

#top h1 {
  font-size: 40px;
}

#top h3 {
  margin-top: 50px;
}

#menu {
  width: 200px;
  float: right;
  text-align: center;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  width: 100%;
  text-align: center;
}

.menu-list li a {
  display: inline-block;
  width: 100%;
  padding: 10px;
}

#contents {
  width: 800px;
  margin: 0 auto;
  padding: 30px;
}

#contents h2 {
 margin-top: 60px; 
}

.bookmark-list p {
  margin-bottom: 25px;
}

.up {
  text-align: right;
}


/*ここからコピーライト*/

#copyright {
  text-align: center;
  margin: 0 auto;
  background-color: rgb(222,222,222);
  width: 800px;
}

/*ここまでコピーライト*/


/*ここからサンプルページ*/

.page-sample {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 10px 30px 10px;
  box-shadow: 0px 0px 10px rgb(155,155,155);
  border: solid 1px rgb(155,155,155);
  border-radius: 10px;
}

/*ここまでサンプルページ*/


/*ここからレスポンシブデザイン*/

@media (max-width:800px) {
  #wrapper, #contents {
    width: 90%;
    padding: 20px;
  }
  #wrapper {
    margin-top: 100px;
  }
  #top h1 {
    margin: 2px;
    font-size: 32px;
  }
  #top h3 {
    margin-top: 50px;
  }
  input {
    width: 100px;
  }
  textarea {
    width: 200px;
    height: 100px;
  }
  #copyright {
    width: 100%;
  }
}

/*ここまでレスポンシブデザイン*/

行動規範の内容に同意します

回答2件

HTMLの構成を変えたくないのであれば、CSSのみで下記追加だけでもできます

css
1@media (max-width:800px) {
2  #wrapper {
3    display: -webkit-flex;
4    display: flex;
5    flex-direction: column-reverse;
6  }
7  #top {
8    float: none;
9  }
10  #menu {
11    float: none;
12    width: 100%;
13  }
14}
15

投稿2018/02/06 14:48

kszk311

総合スコア3404

aazzkk

2018/02/07 06:50

コメントありがとうございます。教えていただいた方法で修正できましたがが先に回答いただいていた方をベストアンサーとさせていただきました。こんな方法もあるのかと勉強になります。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

CSS
1@media (max-width:800px) {
2	#menu {
3		width: auto;
4		float: none;
5	}
6}

投稿2018/02/06 10:41

kei344

総合スコア69400

aazzkk

2018/02/06 11:20

コメントありがとうございます。理想としては#wrapperより上に表示したいです。レスポンシブ用のメニューをhtmlに組み込んだ方がいいのでしょうか？

kei344

2018/02/06 12:40

id="menu"とid="top"の位置を入れ替えればよいです。

kei344

2018/02/06 12:41

https://jsfiddle.net/ube24Lop/

aazzkk

2018/02/07 06:47

無事修正できました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブデザインでメニューを画面上部に表示したい。

関連した質問