ブートストラップ3：アイコンの下にパネルのテキストが折り返されます

Question

古い質問がありますhereの下のテキストをの下に折り返すようにしたいと思います。

<div class="container"> 
    <div class="panel panel-default"> 
    <table class="table table-hover"> 
     <tbody> 
     <tr> 
      <td> 
      <span class="glyphicon glyphicon-file"></span> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </td> 
      <td class="text-right text-nowrap"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
       <span class="glyphicon glyphicon-trash"></span> 
      </button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

も、ブートストラップ3のpanel以外のクラスを使用して任意のアイデアも考慮されます。ここでは

は、私が良く、これまで行って見つけたコードです。
フィドルhereまたは

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <table class="table table-hover"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <span class="glyphicon glyphicon-file"></span> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
      </td> 
 
      <td class="text-right text-nowrap"> 
 
      <button class="btn btn-xs btn-info">CCS</button> 
 
      <button class="btn btn-xs btn-warning"> 
 
       <span class="glyphicon glyphicon-trash"></span> 
 
      </button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

あなたは、テーブルを失い、あなたはブートストラップに応答グリッドシステムを使用し、必要に応じて列をプッシュ/プル可能性のdivに行った場合。また、あなたはしなかった場合はメディアクエリに基づいて整列プロパティを変更するクラスを作成することができhttps://jsfiddle.net/4j6fpfk2/1/

<div class="container"> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="row"> 
     <div class="col-sm-2 col-sm-push-10 text-right"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
      <span class="glyphicon glyphicon-trash"></span> 
      </button> 
     </div> 
     <div class="col-sm-10 col-sm-pull-2 col-xs-12"> 
      <div class="visible-xs text-right"> 
      <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </div> 
      <div class="hidden-xs text-left"> 
      <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

：あなたが画面に基づいてテキストおよび表示/非表示を繰り返す可能性が崩壊したときにテキストを右揃えにするにはテキストを繰り返すしたい