Bootstrap Grid将内容调整大小到页面上的新位置

Question

我是新手，所以我可能以一种错误的方式考虑了这个目标，因此，我希望能提供任何建议以及解决方案。

举例来说，我有一个左栏

<div class="row">
    <div class="col-md-3 col-xs-6">Some Data 0</div>
    <div class="col-md-3 col-xs-6">Some Data 1</div>
    <div class="col-md-3 col-xs-6">Some Data 2</div>
</div>

当屏幕与XS匹配时，我希望将“某些数据0”包装在模态组件中。 这样一来，“ Some Data 0”现在将隐藏在模式窗口中，并在其中放置一个按钮，当单击该按钮时，将显示内容为“ Some Data 0”的模式窗口

如何在Bootstrap中完成。 是复制“某些数据0”并仅基于屏幕断点进行显示和隐藏的唯一方法吗？

谢谢

Answer 1

好吧，我可以通过这种方式实现它：

<div class="row">
    <div class="col-md-3 hidden-xs">Some Data 0</div>
    <div class="col-xs-12 hidden-md visible-xs"> Handle your modal with Some Data 0 in this div</div>

    <div class="col-md-3 hidden-xs">Some Data 1</div>
    <div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 1 in this div</div>

    <div class="col-md-3 hidden-xs">Some Data 2</div>
    <div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 2 in this div</div>
</div>

这里的主要功能是使用hidden-{}和visible-{}类。