Html 响应标签和文本输出对齐

我有一个html代码，它旁边有一个标签和一个输出

<div class="panel-body">

                    <div class="col-sm-6">
                        <label class="head6">Business Name : </label><span class="head9 halfR">'.$name.'</span>
                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Website URL : </label><span class="head9 halfR">'.$url.'</span>    
                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Tagline : </label><span class="head9 halfR">'.$tagline.'</span>

                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Description : </label><span class="head9 halfR">'.$descrip.'</span>    
                    </div>

当它在桌面视图上时看起来很好，问题是当我将它重新调整到手机大小时，它会变成这样

---

我怎样才能解决这个问题？它应该是响应性的。任何答案都将不胜感激。

像这样尝试或使用引导表

企业名称：'.$Name'
网站URL:'.$URL'
标语：'.$Tagline'
描述：'.$descripp'

---

查看媒体查询，您需要在移动级别更改CSS属性。我建议将标签和跨距都设置为100%，去掉浮点数，以便数据显示在标签下。另一种方法是使用display:table单元格，然后在不同的媒体查询中简单地更改宽度。这是对的。在这种情况下，您的标签大于40%，因此会导致与60%宽的标签断线。在媒体查询和表格单元格布局之间，您的呼叫。我仍然无法接听。

.halfR{
  width:60%;
  float:right;
  word-wrap:break-word;
}

                <div class="col-sm-12">
                    <label class="head6">Business Name : </label><span class="head9 halfR">'.$name.'</span>
                </div>

                <div class="col-sm-12">
                    <label class="head6">Website URL : </label><span class="head9 halfR">'.$url.'</span>    
                </div>

                <div class="col-sm-12">
                    <label class="head6">Tagline : </label><span class="head9 halfR">'.$tagline.'</span>

                </div>

                <div class="col-sm-12">
                    <label class="head6">Description : </label><span class="head9 halfR">'.$descrip.'</span>    
                </div>