How to specify grid sizes for a specific selector?

Question

css

I have my own network:

.container .cols.col-1 {width: 8.33333333333%;}
.container .cols.col-2 {width: 16.666666667%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.333333333%;}
.container .cols.col-5 {width: 41.666666667%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.333333333%;}
.container .cols.col-8 {width: 66.666666667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.333333333%;}
.container .cols.col-11 {width: 91.666666667%;}
.container .cols.col-12 {width: 100%;}

Specified such styles for width less than 650px. But they apply to the entire site.

@media screen and (max-width: 650px) {
  .container {
  width: 95%;
}	
  .container .cols.col-1,
  .container .cols.col-2,
  .container .cols.col-3,
  .container .cols.col-4,
  .container .cols.col-5,
  .container .cols.col-6,
  .container .cols.col-7,
  .container .cols.col-8,
  .container .cols.col-9,
  .container .cols.col-10,
  .container .cols.col-11,
  .container .cols.col-12 {width: 100%;}
  }

<footer class="wrapper-footer">
    <div class="container">
      <div class="row">
        <div class="cols col-4">
          <h4>Recent Posts</h4>
            <ul class="footer-column-left">
              <li><a href="">Wedding Photos that Will Blow Your Mind Away.</a></li>
              <li><a href="">Intent WordPress Theme Features are Amazing.</a></li>
              <li><a href="">A New Era of Design is Here</a></li>
              <li><a href="">Creativio WordPress Theme nowAvailable for Sale.</a></li>
            </ul>
        </div>
        <div class="cols col-4">
          <h4>About intent</h4>
            <p class="footer-column-center">Lorem ipsum dolor sit amet, at mea eius corpora, at eam munere facilisi omittantur. Nemore accusam usu no, ei nec vidit commune constituto. Te usu inani volumus, eum albucius menandri at, sed apeirian percipitur ad.
<span>Id vitae regione has. In tollit dicant vim. His ex detracto percipitur, id vis nibh quas illum. Delicata dissentiet ius ne, latine euripidis quaerendum et vis.</span></p>
        </div>
        <div class="cols col-4 footer-column-right">
          <h4>Social Media</h4>
          <div class="sprites">
              <a class="sprite sprite-behance"></a>
              <a class="sprite sprite-blogger"></a>
              <a class="sprite sprite-digg"></a>
              <a class="sprite sprite-dribbble"></a>
              <a class="sprite sprite-email"></a>
              <a class="sprite sprite-evernote"></a>
              <a class="sprite sprite-facebook"></a>
              <a class="sprite sprite-flickr"></a>
              <a class="sprite sprite-google-"></a>
              <a class="sprite sprite-linkedin"></a>
              <a class="sprite sprite-path"></a>
              <a class="sprite sprite-picasa"></a>
              <a class="sprite sprite-reddit"></a>
              <a class="sprite sprite-rss"></a>
              <a class="sprite sprite-skype"></a>
              <a class="sprite sprite-stumble-upon"></a>
              <a class="sprite sprite-tumblr"></a>
              <a class="sprite sprite-twitter"></a>
              <a class="sprite sprite-vimeo"></a>
              <a class="sprite sprite-zerply"></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

How to write for wrapper-footer and replace cols col-4 with cols col-12?

Answer 1

If you don’t use Bootstrap, then at least it makes sense to get acquainted with its principles of work and all questions and problems be solved.
Grid [en]
Grid [ru]
See how it's all implemented.