Bootstrap button/pills stops working if the parent has class "pull-right"

Question

Scenario

I am using flatfy bootstrap template to develop a simple website.

Problem

When I try to add a button/pill as a child of an element having pull-right class, the button works fine in desktop orientation(landscape), but when I resize browser window to mobile size(portrait), the button/pill stops working altogether. I tried switching browsers, but the result was same. I tried using radio buttons instead, and that didn't work either.

Example

You can download flatfy template from here and append

<ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
    <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
    <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
</ul>
<p class="btn btn-success">Submit</p>

after line 176 of index.html to see it in action

Source

This is the block of code if some code-ninja can figure out the problem without even looking at the demo

<!-- Use it -->
<div id ="useit" class="content-section-a">

    <div class="container">

        <div class="row">

            <div class="col-sm-6 pull-right wow fadeInRightBig">
                <img class="img-responsive " src="img/ipad.png" alt="">
                <ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
                    <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
                    <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
                </ul>
                <p class="btn btn-success">Submit</p>
            </div>

            <div class="col-sm-6 wow fadeInLeftBig"  data-animation-delay="200">   
                <h3 class="section-heading">Full Responsive</h3>
                <div class="sub-title lead3">Lorem ipsum dolor sit atmet sit dolor greand fdanrh<br> sdfs sit atmet sit dolor greand fdanrh sdfs</div>
                <p class="lead">
                    In his igitur partibus duabus nihil erat, quod Zeno commuta rest gestiret. 
                    Sed virtutem ipsam inchoavit, nihil ampliusuma. Scien tiam pollicentur, 
                    uam non erat mirum sapientiae lorem cupido
                    patria esse cariorem. Quae qui non vident, nihilamane umquam magnum ac cognitione.
                </p>

                 <p><a class="btn btn-embossed btn-primary" href="#" role="button">View Details</a> 
                 <a class="btn btn-embossed btn-info" href="#" role="button">Visit Website</a></p>
            </div>   
        </div>
    </div>
    <!-- /.container -->
</div>

Thank You :)

Edit

Edit1: Added screenshot of mobile version

Answer 1

Just remove the pull-right class from first col-sm-6 and move first section to second and second section to first place. Hope it will fix your issue.

Formatted Code:

<div class="row">


  <div class="col-sm-6 wow fadeInLeftBig animated animated" data-animation-delay="200"  style="visibility: visible;">
    <h3 class="section-heading">Full Responsive</h3>
    <div class="sub-title lead3">Lorem ipsum dolor sit atmet sit dolor greand fdanrh<br> sdfs sit atmet sit dolor greand fdanrh sdfs</div>
    <p class="lead">
      In his igitur partibus duabus nihil erat, quod Zeno commuta rest gestiret. Sed virtutem ipsam inchoavit, nihil ampliusuma. Scien tiam pollicentur, uam non erat mirum sapientiae lorem cupido patria esse cariorem. Quae qui non vident, nihilamane umquam
      magnum ac cognitione.
    </p>

    <p><a role="button" href="#" class="btn btn-embossed btn-primary">View Details</a>
      <a role="button" href="#" class="btn btn-embossed btn-info">Visit Website</a></p>
  </div>

  <div class="col-sm-6  wow fadeInRightBig animated animated" style="visibility: visible;">
    <img alt="" src="img/ipad.png" class="img-responsive ">
    <ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
      <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
      <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
    </ul>
    <p class="btn btn-success">Submit</p>
  </div>
</div>