根据屏幕大小/媒体查询更改 Bootstrap 列类属性

Question

我正在使用 Twitter 的引导程序，但遇到了问题。我正在使用网格系统，并且在我的 html 中使用col-lg-6该类创建了两个宽度相等的不同列。见下面的代码：

<div class="row">
<div class="row sameHeightCols">
        <div class="col-lg-6">
            <div class="contentBlock">
                <h3>Header</h3>
            </div>
        </div>
        <div class="col-lg-6">
            <h3>Header2</h3>
        </div>
    </div>
</div>

我遇到的问题是，当它达到某个屏幕尺寸时，它会中断，并且左侧块中的某些内容会消失。当屏幕尺寸介于col-lg和之间时会发生这种情况col-md。我想要做的是更改特定屏幕尺寸的类，因此它会更改为这个。

<div class="col-lg-9">
    <div class="contentBlock">
      <h3>Header</h3>
    </div>
</div>
<div class="col-lg-3">
     <h3>Header2</h3>
</div>

这在带有媒体查询的 css 中是可能的吗？还是我需要使用javascript？任何帮助将不胜感激，因为我做了很多研究，但找不到解决方案。如果需要任何进一步的代码/信息，也请告诉我。

谢谢。

Answer 1

保罗·菲茨杰拉德，你好。您只是想将 lg... 时的 6x6 更改为 md 时的 9x3 吗？

如果是这样，看看这个Fiddle。

调整窗口大小。我你不希望这个堆叠然后让我们知道。

<div class="container"> 
    <div class="row text-center">
        <div class="col-md-9 col-lg-6 block1"><h2>Header 1</h2></div>
        <div class="col-md-3 col-lg-6 block2"><h2>Header 2</h2></div>    
    </div>    
</div> 

下面的屏幕截图显示了从 LG 6x6 调整到 MD 9x3 时的变化。

已添加到此帖子

保罗，我想这就是你想要的，在MD和LG之间有一个新的媒体断点。

在下面的屏幕截图中，我添加了文本以显示它何时使用LG和XLG以及MD。

这是小提琴。

希望这能让你开始你想要的。