need help in bootstrap mobile design - html

Question

i am trying to understand the bootstrap design approach to mobile
for example if there are two contents name and zyx--
<div class = "container row">
<div class = "col-xs-4 col-md-4">Name</div>
<div class = "col-xs-8 col-md-8">zyx</div>
</div>
now the "name" and "zyx" has to viewed horizontally or stacked below one another
supposedly if the contents are given as below so when resized, they stack below each other..a row can contain only 12 columns but is the code below the right approach
<div class = "container row">
<div class = "col-xs-12 col-md-4">Name</div>
<div class = "col-xs-12 col-md-8">zyx</div>
</div>

Answer 1

Yes, Nothing wrong in the code. It all depends on what you are displaying in the div and how much width do you want it to take on the screen.
Explaining your code
<div class = "container row">
<div class = "col-xs-4 col-md-2">Name</div>
<div class = "col-xs-2 col-md-8">zyx</div>
</div>
For a extra small device (col-xs): You are saying that if at all its a extra small device make the first div 4 column'd width of total width. And the second div as 2 column'd width.
For Medium device (col-md): Here you are saying if its a medium device change the 4 column'd width to 2 column , which is fine. But I dont feel the second div is right. Because you are saying if the device is small make the 2 column'd width to 8 columns. Weird because if you are able to use only 2 column in extra small devices why do you want 8 columns in a medium device to display the same content. It will be ok even with 1 column'd width. But still depends on your UI (may be you are showing extra elements which are hidden during extra small device screen view)
Also Remember these rules of bootstrap
<div class="col-xs-4"> : with only this rule you are saying no matter what size the device is always have 4 columns of total width :ie if there is no other class specified after col-xs-4 then the same effect will be carried to other device width also. So it would be same as col-xs-4 col-sm-4 col-md-4 col-lg-4
<div class="col-xs-4 col-md-2"> : This would be equivalent to <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> , So its the same idea. The class settings from the lower devices will be applied to its higher devices also untill there are other class applied.
Let me know if this is clear.

Answer 2

There are a couple things wrong with your code. First, you want your rows to be child elements of your container divs.
<div class="container">
<div class="row">
etc...
</div>
</div>
Otherwise your containers will stick to the side of the viewport. Second, it's a good idea to make sure that columns of the same width add up to twelve. So change col-md-2 to col-md-4, for example. That way your rows will always fill up the entire width of their containers.
.col-1{
background:yellow;
}
.col-2{
background:lightblue;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 col-1">Name</div>
<div class="col-xs-12 col-md-8 col-2">zyx</div>
</div>
</div>