レスポンシブについて教えてください。

はじめまして
この場を借りてご質問させて頂きます。
現在、レスポンシブのサイト制作中ですが、上手くいきません。
970px以上は3カラム
600px～970pxは2カラムにしたいです。
ソースコードは下記に記載してあります。宜しくお願いします。

<html> <div class="boxA-1"> <div class="skillBox-top"> <h2>SKILLS</h2> <p class="lead">自身のパソコンスキルについてのページです。</p> </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-html5"></i></div>
        <div class="comment">
          <h3>HTML/HTML5</h3>
          <p>適切な文書構造意識してのコーディングやSEO対策を考慮したコーディングを行うことができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-css3"></i></div>
        <div class="comment">
          <h3>CSS/CSS3</h3>
          <p>基礎を理解した上で、レスポンシブデザインやベンダープレフィックスを使用したサイトのデザインができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-scissors"></i></div>
        <div class="comment">
          <h3>Photoshop</h3>
          <p>画像の編集やロゴ・バナー等の素材制作、デザインカンプの作成・スライスを行うことができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-pencil"></i></div>
        <div class="comment">
          <h3>Illustrator</h3>
          <p>地図やアイコン、ワイヤーフレームの作成を行うことができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-film"></i></div>
        <div class="comment">
          <h3>Fireworks</h3>
          <p>基本操作を理解し、簡単な画像作成やモックアップの作成ができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-inbox"></i></div>
        <div class="comment">
          <h3>Dreamweaver</h3>
         <p>手入力でのWebサイト制作やテンプレートの作成、FTPを使用したファイルのアップロードを行うことができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-magic"></i></div>
        <div class="comment">
          <h3>jQuery</h3>
          <p>プラグインのカスタマイズを行うことができます。</p>
        </div>
      </div>

      <div class="skillBox">
        <div class="icon"><i class="fa fa-wordpress"></i></div>
        <div class="comment">
          <h3>Wordpress</h3>
          <p>テンプレートのカスタマイズやプラグインを使用した記事作成ができます。</p>
        </div>
      </div>
      
      <div class="skillBox">
        <div class="icon"><i class="fa fa-desktop"></i></div>
        <div class="comment">
          <h3>PHP</h3>
          <p>簡単なメールフォームの作成やMySQLと連動したデータベースの管理・更新を行うことができます。</p>
        </div>
      </div>

</div>

/* 600px以上～970px以下 */
<css>
.skillBox {overflow:hidden;width:280px;float: left;margin:0 15px 40px;}
.skillBox .icon {float:left;}
.skillBox .icon i {width:60px;height:60px;line-height:60px;text-align:center;font-size:40px;
color:#fff;background:#B72D2D;border-radius:15px;margin-left:20px;}
.skillBox .comment {width:260px;float:right;}
.skillBox h3 {font-size:18px;margin-bottom:15px;}
.skillBox p {font-size:14px;line-height:1.5;}