アラートクラスのブートストラップボタンを強制的に押して、その左側に警告テキストを表示することができません。

Question

こんにちはすべて私のウェブページの両側に2つのボタンが作成されています。そのクリック時の各ボタンは、画像内

のようなその関連する側に警告テキストを示して私が使用しているコードは次のとおりです。

<div class="row"> 
    <div class="col-lg-6"> 
    <div class="previous"> 
     <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
     <span id="alert_info_1" class="alert alert-info"> 
           Alert Info 
     </span> 
     </div> 
    </div> 
    <div class="col-lg-6 text-left"> 
     <div class="next" > 
     <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
     <span id="alert_info_2" class="alert alert-info "> 
           Alert Info 
     </span> 
     </div> 
    </div> 
    </div> 

ボタンの位置合わせのためのCSSながら：

私がやりたいのは何

.previous { 
text-align: left; 
    } 

.next { 
text-align: right; 
    } 

は、ショーは上の写真にあるよう、ボタン2の警報情報テキストが右にあるボタンの左側に表示されないようにすることです

ボタンクラスにleft-leftを追加しようとしましたが、機能しませんでした。
は、私はまた、スパンクラスにプル左のクラスを追加しようとしました、それは左にテキストを余儀なくさが、警告のテキストは、以下の画像のように、ボタン2からかなり遠く登場：

は、誰もがいずれかを持っていどのようにこれを修正するアイデア？

Answer 1

だけで、それが仕事とあなたのHTMLを変更しない場合は、ので、いくつかの余分なを追加する必要があります2番目のボタンと警告ボックスを交換しますCSS

.previous { 
 
     text-align: left; 
 
    } 
 

 
    .next { 
 
     text-align: right; 
 
    } 
 

 

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
<div class="previous"> 
 
    <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
 
    <span id="alert_info_1" class="alert alert-info"> 
 
          Alert Info 
 
    </span> 
 
</div> 
 
    </div> 
 
    <div class="col-xs-6 text-left"> 
 
<div class="next"> 
 
    <span id="alert_info_2" class="alert alert-info ">Alert Info</span> 
 
    <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
 
</div> 
 
    </div> 
 
</div>

Answer 2

スワップ秒スパンとボタン：

.previous { 
 
    text-align: left; 
 
} 
 

 
.next { 
 
    text-align: right; 
 
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
    <div class="previous"> 
 
     <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
 
     <span id="alert_info_1" class="alert alert-info"> 
 
           Alert Info 
 
     </span> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6 text-left"> 
 
    <div class="next"> 
 
     <span id="alert_info_2" class="alert alert-info ">Alert Info</span> 
 
     <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
 
    </div> 
 
    </div> 
 
</div>