Question: I have two text box `Textbox1` and `Textbox2` . I want to bring some values in textbox2 as per the textbox1 value. I have a query 

```
protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
     string str="select TimeIn from Employee where Date='"+txtdate.text+"'";
     Sqldatreader dr=conn.query(str);
     if(dr.Read())
     {
     Textbox2.text=dr[0].Tostring();
     }
   }

```

Answer: 
I recommend (even though it's dirty) adding your view twice, once in a 

```
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>

```

and for the other 'layout

```
<div class="hidden-xs">Your content for everything but XS-grid.</div>

```

Hope that helps (looking forward to a better solution ;)).
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.

DEMO: <https://jsbin.com/nuhoba>
================================

It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same `.row` and the `.row` is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.

**HTML:**

```
<div class="container">
   <div class="row">
      <div class="col-sm-3">
         A
      </div>
      <div class="col-sm-4 col-sm-push-2 text-center-xs">
         C
      </div>
      <div class="col-sm-2 col-sm-pull-4">
         B
      </div>
      <div class="col-sm-3 text-right">
         <div class="company-add-btn"><a href="#">+ D</a></div>
      </div>
   </div>
</div>

```

**CSS**

```
@media (max-width:767px) {
  .text-center-xs {text-align:center;}

}

```