レスポンシブデザイン-画面全体を占めるように画像を左側に配置する方法

メディアクエリを使用していて、レスポンシブデザインについてもっと学ぼうとしています。

メディアクエリcss

@media screen 
  and (max-width: 480px){ 
    #header .left {
        float:none;
        width:100%;
        height: 100%;
    }
        #header .left img{
            margin:0%;
            width:100%;
            height:auto;
        }

    #header .right {
        float:none;
        width:100%;
        height:100%;
        clear:both;
    }

  }

私の通常のCSSは次のようになります：

    #header .left{
        width:17.95833335%;
        float:left;
    }
        #header .left img{
            margin:0%;
            max-width:100%;
            max-height:100%;
            -moz-border-radius:5px 20px 5px; -webkit-border-radius:5px 20px 5px; border-radius:5px 20px 5px;
        }

#header .right{
        width:79.95833335%;
        max-height:100%;
        min-height:100%;
        margin:0% 1%;
        /*background-color: red;*/
        background:
            linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
            background-color: #131313;
            background-size: 20px 20px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        float:right;
    }

html

<div class="left">
                    <img src="{{ url_for('static', filename='my_pic.jpg') }}" alt="My Pic" />
                </div><!--left-->
                <div class="right">
                    <h2>
                        Test test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</h2>
</div><!--right-->

私は現在見ています：

右側の黒い領域（.right）を下に移動し、左側の画像（.left）を画面全体に表示したいと思います。

どうすればこれを達成できますか？

ありがとう