css bootstrap - 如何将一列拆分为仅适用于小屏幕的行？

Question

这是起点: http://www.bootply.com/r88hL82f3m

<div class="container">
  <div class="row">
    <div class="col-xs-0 col-md-3">
    </div>
     <div class="col-xs-12 col-md-9 text-right">
       <div id="id1">Div1 Div2</div>
    </div>
  </div>

</div>

只针对小屏和超小屏，我需要将div1和div2分成两行，即div1占第一行，div2占第二行。

虽然下面的 bootply 看起来像是一个解决方案，但它不起作用，因为我不希望 Div1 和 Div2 在中等屏幕上分成几列 - 我希望它们在中等、大型和超大屏幕上留在一列中-大屏幕。 http://www.bootply.com/RkxKSdYZ2F

Answer 1

使用visible-* 和hidden-* 类来使用两个不同的容器。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 visible-xs visible-sm">
      <div class="id1">Div1</div>
      <div class="id2">Div2</div>
    </div>
    <div class="col-xs-12 hidden-xs hidden-sm">
      <div class="id1">Div1 Div2</div>
    </div>
  </div>

</div>