1.html

<div class="section">
  <div class="header">Header</div>
  <div class="content">
    <div class="sidebar">Sidebar</div>
    <div class="article">Article</div>
  </div>
  <div class="footer">Footer</div>
</div>

1.scss

.section {
  @include make-container();
  @include make-container-max-widths();
}

.header {
  @include make-col(12);
}

.content {
  @include make-row();
}

.sidebar {
  @include make-col-ready();
  @include make-col(12);

  @media (min-width: #{map-get($grid-breakpoints, md)}) {
    @include make-col(2);
  }
}

.article {
  @include make-col-ready();
  @include make-col(12);

  @media (min-width: #{map-get($grid-breakpoints, md)}) {
    @include make-col(10);
  }
}

.footer {
  @include make-col(12);
}

2.html

<div class="container">
  <div class="col-xs-12">Header</div>
  <div class="row">
    <div class="col-xs-12 col-md-2">Sidebar</div>
    <div class="col-xs-12 col-md-10">Article</div>
  </div>
  <div class="col-xs-12">Footer</div>
</div>