html - Bootstrap 网格格式 - 不同的设备

Question

我不是最好的 html/css 编码员，我的 html 在桌面上运行良好，但在手机上看起来很差。

<div class="col-md-6">
  <div class="col-md-9">
    <div class="row"><strong>Estimated # of Monthly XXXXXXXXs:</strong></div>
    <div class="row"><strong>Estimated Monthly Revenue Increase!!:</strong></div>
    <div class="row"><strong>Estimated Monthly XXXXXXXXXs Costs:</strong>  </div>
    <div class="row"><strong>Using XXXXXXXXX gives you:</strong></div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

在桌面上，它显示为:

Estimated # of Monthly Leads:         0
Estimated Monthly Revenue Increase:   $0.00
Estimated Monthly XXXXXXXX Costs:     $0.00
Using XXXXXXXXX gives you:            $0.00

但在手机上显示为:

Estimated # of Monthly 
Leads:         
Estimated Monthly Revenue
Increase:   
Estimated Monthly XXXXXXXX
Costs:     
Using XXXXXXXXX gives you:            
0
$0.00
$0.00
$0.00

我可以只使用一个网格，但我喜欢两列对齐。那么如何在手机上保持同样漂亮的桌面格式呢？

Answer 1

使用这个 fiddle ..

<div class="col-md-6 col-sm-12 col-xs-12">
  <div class="col-md-9 col-sm-9 col-xs-9">
    <div class="row">
      <strong>Estimated # of Monthly XXXXXXXXs:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly Revenue Increase!!:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly XXXXXXXXXs Costs:</strong>
    </div>
    <div class="row">
      <strong>Using ActiveLEAD gives you:</strong>
    </div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>