IE7以下では無視・・・とすればこちらが良いかもしれません。がしかし、スマホ画面には表示されません。

        div.cover {
            display: table;
            border-spacing: 0.5em;
            margin: 0px;
            padding: 0px;
            width: 100%;
            background-color: #cccccc;
        }
        div.cover div.box1 {
            display: table-cell;
            margin: 0px;
            background-color: #ffdddd;
            padding: 0.5em;
            width: 33.3%
        }
        div.cover div.box2 {
            display: table-cell;
            margin: 0px;
            background-color: #ffffcc;
            padding: 0.5em;
            width: 33.3%
        }
        div.cover div.box3 {
            display: table-cell;
            margin: 0px;
            background-color: #ccffcc;
            padding: 0.5em;
        }

/* ——————————————– */
        /* 横幅が450px以下であれば以下のCSSが適用される も追加*/
        /* ——————————————– */
        @media screen and (max-width: ４５0px) {
            div.cover {
                display: block;
            }
            div.cover div.box1 {
                display: block;
                width: 100%;
                padding: 0px;
            }
            div.cover div.box2 {
                display: block;
                width: 100%;
                padding: 0px;
            }
            div.cover div.box3 {
                display: block;
                width: 100%;
                padding: 0px;
            }
        }

 

<div class="cover">
   <div class="box1">
      1段目
   </div>
   <div class="box2">
      2段目
   </div>
   <div class="box3">
      3段目
   </div>
</div>