I'm using Bootstrap 3. I have 2 column in 1 row. How do I push the column in second column to next row if text in 1st row is longer than 1 row
? Here is my code and the Lorem Ipsum
text in 1st column is short, so the output is what I want:
<div class="col-sm-12">
<div class="panel panel-default">
<header class="panel-heading">
<i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
<b></b>In Use </span>
</header>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6 col-xs-12">
<div class="row m-t-8 m-b-8">
<div class="col-sm-6 col-xs-12"> Agenci </div>
<div class="col-sm-6 col-xs-12">
<span class="text-primary">What is Lorem Ipsum</span>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="row m-t-8 m-b-8">
<div class="col-sm-6 col-xs-12"> Department </div>
<div class="col-sm-6 col-xs-12">
<span class="text-primary"> Retail Audit </span>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="row m-t-8 m-b-8">
<div class="col-sm-6 col-xs-12"> PTJ Paid </div>
<div class="col-sm-6 col-xs-12">
<span class="text-primary">10000001</span>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="row m-t-8 m-b-8">
<div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
<div class="col-sm-6 col-xs-12">
<span class="text-primary">348812</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is working jsfiddle : https://jsfiddle.net/od6eup8w/
If the Lorem Ipsum
text is longer than one line, it would drop to second line like in the picture. Not the output I want.
I want the Lorem Ipsum
text to occupied the whole line like second picture below and push the second column Department
down: