Usando mixins no bootstrap 3 para evitar marcação não-semântica para a estrutura do layout

Eu sou relativamente novo tanto para bootstrap quanto para menos e isso é um teste. O objetivo é pegar as classes de bootstrap e transformá-las em classes simples e semânticas usando menos. Continuo recebendo mensagens de erro dizendo que .col-sm-12 e .col-md-8 são indefinidos.

Como resolvo esse problema?

    /*less styles file*/

@import "bootstrap.min.css";

@boom: #ea7000;

@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";

.tim    {
    height: 200px;
        @media screen, @screen-sm   {
            background-color: black;
            .col-sm-12;
        }
        @media screen, @screen-md{
            background-color: @boom;
            .col-md-8;
        }
}

questionAnswers(3)

yourAnswerToTheQuestion