css - 如何使用Bootstrap 3显示其他布局？

我正在尝试为移动视图显示不同的布局。在使用网格系统的桌面视图中，我有4列，每列有2列图像和一个label + value。在移动设备中，我想跳过图片列，并希望标签和值彼此相邻，所以类似：

这是一个标签：这是一个跨度。

桌面版中的1列如下所示：

<div class="col-md-3">
      <div class="col-md-2">
        <p>col-md-4</p>
      </div>
      <div class="col-md-10">
        <div>This is a label</div>
        <span>This is a span</span>
      </div>
</div>

我尝试使用col-sm-3，但它仍显示在桌面上吗？如何获得标签和值彼此相邻的移动视图？

另请参阅：codepen

最佳答案

您可以使用bootstrap CSS类：

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>