Trying to figure out bootstrap less media queries

EaRPjN.markdown

EaRPjN

A Pen by Captain Anonymous on CodePen.

License.

Issue.

index.html

<h1>Normal bootstrap class names</h1>
<br>
<div class="container">
    <div class="row">
        <main class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: red; color: #ffffff;">
         col-xs-12 col-sm-12 col-md-6 col-lg-6
        </main>
        <aside class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background-color: green; color: #ffffff;">
        col-xs-12 col-sm-6 col-md-3 col-lg-3
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background-color: blue; color: #ffffff;">
        col-xs-12 col-sm-6 col-md-3 col-lg-3
        </aside>
    </div>
</div>


<br>
<br>
<h1>Using custom bootstrap class names - layout should be the same as above</h1>
<br>

<div class="content-sidebar-sidebar">
  
  <div class="site-inner">
    <div class="content-sidebar-wrap">
        <main class="content" style="background-color: red; color: #ffffff;">
          main content
        </main>
        <aside class="sidebar-primary" style="background-color: green; color: #ffffff;">
          sidebar primary
        </aside>
        <aside class="sidebar-secondary" style="background-color: blue; color: #ffffff;">
          sidebar secondary
        </aside>
    </div>
</div>
 
</div>

style-alt.less

.site-inner {
    &:extend(.container);

    .content-sidebar-wrap {
        &:extend(.row);

        .content-sidebar .content {
            &:extend(.col-xs-6, .col-sm-6, .col-md-12, .col-lg-12);
        }
        .content-sidebar-sidebar .sidebar-primary, 
        .content-sidebar-sidebar .sidebar-secondary {
            &:extend(.col-xs-3, .col-sm-3, .col-md-12, .col-lg-12);
        } 

     }

}

style.css

.site-inner {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.site-inner:before,
.site-inner:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.site-inner:after {
  clear: both;
}
.site-inner:before,
.site-inner:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.site-inner:after {
  clear: both;
}
@media (min-width: 768px) {
  .site-inner {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .site-inner {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .site-inner {
    width: 1170px;
  }
}
.content-sidebar-wrap {
  margin-left: -15px;
  margin-right: -15px;
}
.content-sidebar-wrap:before,
.content-sidebar-wrap:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.content-sidebar-wrap:after {
  clear: both;
}
.content-sidebar-wrap:before,
.content-sidebar-wrap:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.content-sidebar-wrap:after {
  clear: both;
}
.content-sidebar .content {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar .content {
    float: left;
    width: 75%;
  }
}
@media (min-width: 992px) {
  .content-sidebar .content {
    float: left;
    width: 66.66666666666666%;
  }
}
@media (min-width: 768px) {
  .content-sidebar .content {
    float: left;
    width: 100%;
  }
}
.content-sidebar .sidebar-primary {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 33.33333333333333%;
  }
}
@media (min-width: 768px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 100%;
  }
}
.content-sidebar-sidebar .content {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 100%;
  }
}
.content-sidebar-sidebar .sidebar-primary,
.content-sidebar-sidebar .sidebar-secondary {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 50%;
  }
}

style.less

.site-inner{
  .container-fixed();

@media (min-width: @screen-sm) {
    width: @container-sm;
  }
  @media (min-width: @screen-md) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

.content-sidebar-wrap {
  .make-row();
}

.content-sidebar-sidebar .content {
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(12);
  .make-xs-column(12);
}

.content-sidebar-sidebar .sidebar-primary, 
.content-sidebar-sidebar .sidebar-secondary  {
  .make-lg-column(3);
  .make-md-column(3);
  .make-sm-column(6);
  .make-xs-column(12);
}