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」被包裹在一個模態分量。因此，「某些數據0」現在隱藏在模式窗口中，並且按鈕位於單擊此位置時將顯示內容爲「某些數據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-{}類。