Bootstrap grid system- Can we use 2 col-*-12 in a .row class? [duplicate]

Question

From all the links I have read online, I understand that the sum of all the col classes inside a row class should be 12.

But, I have seen cases where people are using multiple col-*-12 inside a row. Is this a valid bootstrap syntax?

For example- The following is VALID-

<div class="row">
  <div class="col-xs-6">
  </div>
  <div class="col-xs-6">
  </div>
</div>

And the following is also VALID

<div class="row">
  <div class="col-xs-9">
  </div>
  <div class="col-xs-3">
  </div>
</div>

Is the following VALID?

<div class="row">
  <div class="col-xs-12"></div>
  <div class="col-xs-12"></div>
</div>

Please give proper reasoning.

EDIT: Thanks for letting me know that it's VALID. Can anyone let me know if it's a good idea to do so? or may be, doing the following is better

<div class="row">
  <div class="col-xs-12"></div>
</div>
<div class="row">
  <div class="col-xs-12"></div>
</div>

Which one is better out of the two?

Answer 1

Yes it is valid. According to the doc

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

UPDATE:

If you have different height blocks and you put everything inside one row block, you will get incorrect behavior. See this plunker

but if you use col-X-12 only, it does not really matter the way you use row classes. I think for col-X-12 you can even skip row and col-X-12 class. Just put everything inside regular div tag and you will get 100% width.