Where to put semantically meaningfull blocks in twitter bootstrap skeleton?

this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press – but very remotely, of course – because press already hase content and semantic, while div’s structure of document – only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure – for example:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
      Content, which must be wrapped in some semantically meaningfull element -    like, for example - article-preview class
        </div>
    </div>
</div>

I see two different ways, but dont know, what way is better practice in marking down html documents:

1) Adding semantic class to element, which already have class that forming my document structure – col-xs-12 – or press in my analogy.

<div class="container">
    <div class="row">
        <div class="col-xs-12 article-preview">
        'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
        </div>
    </div>
</div>

2) Or adding brand new semanit block under structuring block and putting my content here:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="article-preview">
      Content, which must be wrapped in some semantically meaningfull element -    like, for example - article-preview class
            </div>
        </div>
    </div>
</div>

I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.

Thank you!