Bootstrap 3 Hyperlink does not work cause of grid system

Question

I am using bootstrap 3.0.2 and i am a little bit confused cause of the grid system. I think i understand the grid system, but i'm not sure if this is a bug in bootstrap or if i am using it in the wrong way. Here is my code:

<table class="table table-striped">
  <tr>
    <td>
    <!-- if medium or large, then print this in one line -->
      <div class="col-xs-12 col-sm-6 col-md-6"><a href="pseudo-link">text</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3">any text</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info1</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info2</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info3</div>
    <!-- end of first line if medium or large -->


      <div class="col-xs-12">text1 whole line</div><!-- Always one line  -->
      <div class="col-xs-12">text2 whole line</div><!-- Always one line  -->
    </td>
  </tr>
...
</table>

The problem here is the hyperlink - the browser does not handle it like a hyperlink, when screen width has the size large(col-lg), medium(col-md) or small(col-sm). But the hyperlink works fine, if screen width is extra small(col-xs). I've analyzed this with Firebug and it seems, that the first two lines are put together, like one div (except screen width extra small).

With a little trick i can fix this, but it's just a dirty hack. If the screen width is greater than extra small, i don't give the second line the complete space:

      <div class="col-xs-12 col-sm-11">text1 whole line</div><!-- Always one line  -->

Now it works as expected but i think it should work without this trick, too. Is my code wrong?

For clarification i have written an example: hyperlink_issue

Answer 1

That is because your 2 last col-xs-12 are positioned above/on top of your link <a> due to the fact all cols should add up to 12, and should not exceed this.

If you want a new row of 12 cols, you should place a new <div class="row">

<td>
 <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6"><a target="_blank" href="http://stackoverflow.com">col-md-6 - This Hyperlink should work, but it doesn't!</a></div>
</div>
<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-3">col-md-3</div>
</div>
<div class="row">
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
</div>
<div class="row">
 <div class="col-xs-12">col-xs-12</div>
</div>
<div class="row">
 <div class="col-xs-12">col-xs-12</div>
</div>
</td>

check this screenshot when col-xs-12 is on top

If your view is smaller, those cols are moving down, screenshot here