Twitter's Bootstrap 3.x semantic mobile grid

Question

After reading the new (unfinished) Bootstrap 3 docs I am wondering how to create semantic mobile grid.

In short. How to convert this:

Answer 1

PART 1: Rant

I hate bootstrappers using html div classes as a presentation layer to their HTML!!! I applaud you looking to program your site correctly.

It reminds me of the 90s and early 2000s when we were all building websites with tables... are we going backwards people?

6
6

vs

6
6

I'm waiting for the day that Google imposes penalties on non-semantic markup.

PART 2: Solution

Anyhow, pulling this back to the question...

For bootstrap 3, as far as I am aware, you cannot use .make-column(6) etc... as per Bass Jobsen's answer because you need to specify the size of the window / screen. lg / md / sm / xs

Here is how I would do it...

main.less

@import 'bootstrap.less';

.wrapper {
    .container;
    .make-row();
    .clearfix();
}

.content-main { // Change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}
.content-sidebar { // change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}

index.html