Как правильно сделать столбцы в адаптивном дизайне?

Я пытаюсь найти отзывчивый дизайн и сделал простой макет с 4 столбцами, по 25% каждый. При очень небольшом размере у меня есть медиа-запрос, который делает их все 100%, и они складываются друг на друга.

Где я застрял в среднем размере (например, выше 480 пикселей). Я хочу, чтобы четыре столбца составляли 50% каждой страницы, поэтому, если у меня есть строка с четырьмя столбцами div, она будет показывать 2 x 2. Проблема в том, что третий не очищается.

Вот мой HTML:

<div class="container">

    <div class="row">
        <div class="four columns"><p>Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns </p></div>
        <div class="four columns"><p>Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 </p></div>
        <div class="four columns"><p>Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 </p></div>
        <div class="four columns"><p>Four columns4 Four columns4 Four columns4 Four columns4 Four columns4 Four columns4 </p></div>
    </div><!-- /row -->

</div>

Вот мой CSS:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.container { 
background-color:#fff;
margin:0 auto;
width: 95%;
border:1px solid #ff0000;
}

.row {
float: left;
clear: both;
width: 100%;
}

 .container .columns {
float: left;
padding: 0 16px;
border: 1px solid #ccc;
}

 .clearfix:after,
.container:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
width:  0;
height: 0;
clear:  both;
}

 .clearfix,
 .container {
zoom:   1;
}

/* ОСНОВНЫЕ КОЛОНКИ ДЛЯ МАЛОГО РАЗМЕРА /***********************/

.container .columns.one,
.container .columns.two,
.container .columns.three,
.container .columns.four,
.container .columns.five,
.container .columns.six,
.container .columns.seven,
.container .columns.eight,
.container .columns.nine,
.container .columns.ten,
.container .columns.eleven,
.container .columns.twelve,
.container .columns.thirteen,
.container .columns.fourteen,
.container .columns.fifteen,
.container .columns.sixteen,
.container .columns.one-third   {   width: 100%;    }

.container { width: 100%; }

@media и (min-width: 480px) {

.container .columns.one         {   width: 6.25%;   }
.container .columns.two         {   width: 12.5%;   }
.container .columns.three       {   width: 18.75%;  }
.container .columns.four        {   width: 50%;     }
.container .columns.five        {   width: 31.25%;  }
.container .columns.six         {   width: 37.5%;   }
.container .columns.seven       {   width: 43.75%;  }
.container .columns.eight       {   width: 50%;     }
.container .columns.nine        {   width: 56.25%;  }
.container .columns.ten         {   width: 62.5%;   }
.container .columns.eleven      {   width: 68.75%;  }
.container .columns.twelve      {   width: 75%;     }
.container .columns.thirteen    {   width: 81.25%;  }
.container .columns.fourteen    {   width: 87.5%;   }
.container .columns.fifteen     {   width: 93.75%;  }
.container .columns.sixteen     {   width: 100%;    }
.container .columns.one-third   {   width: 33.333333333333333%;     }

.container {
    width: 95%;
}

}

@media и (min-width: 800px) {

.container .columns.one         {   width: 6.25%;   }
.container .columns.two         {   width: 12.5%;   }
.container .columns.three       {   width: 18.75%;  }
.container .columns.four        {   width: 25%;     }
.container .columns.five        {   width: 31.25%;  }
.container .columns.six         {   width: 37.5%;   }
.container .columns.seven       {   width: 43.75%;  }
.container .columns.eight       {   width: 50%;     }
.container .columns.nine        {   width: 56.25%;  }
.container .columns.ten         {   width: 62.5%;   }
.container .columns.eleven      {   width: 68.75%;  }
.container .columns.twelve      {   width: 75%;     }
.container .columns.thirteen    {   width: 81.25%;  }
.container .columns.fourteen    {   width: 87.5%;   }
.container .columns.fifteen     {   width: 93.75%;  }
.container .columns.sixteen     {   width: 100%;    }
.container .columns.one-third   {   width: 33.333333333333333%;     }

.container {
    width: 95%;
}

}