I am experiencing an issue with the concurrent use of "Push" and "Pull" column ordering classes.
I would like my columns to be ordered like this:
However, the result on medium and larger screen sizes is
<section style="direction:rtl;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-9"><div class="well">Column 1</div></div>
<div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-3"><div class="well">Column 2</div></div>
<div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-3"><div class="well">Column 3</div></div>
<div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-9"><div class="well">Column 4</div></div>
<div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-9"><div class="well">Column 5</div></div>
<div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-3"><div class="well">Column 6</div></div>
<div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-3"><div class="well">Column 7</div></div>
<div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-9"><div class="well">Column 8</div></div>
<div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-9"><div class="well">Column 9</div></div>
<div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-3"><div class="well">Column 10</div></div>
<div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-3"><div class="well">Column 11</div></div>
<div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9"><div class="well">Column 12</div></div>
</div>
</div>
</div>