Bootstrap布局 - 我不想突破新的界限

Question

我想使用此代码制作类似图片的引导布局：

<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">MAIN NEWS</h3>
</div>

<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>

<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">OTHER NEWS</h3>
</div>
</div>

必须保持排序：主要新闻 - ＆gt;联系方式 - ＆gt;评论 - ＆gt;最多视图 - ＆gt;移动屏幕中的其他新闻。并且布局就像大屏幕中的图片。 h3是块我只是删除它以获得清晰的视图

但是在大​​屏幕中，MAIN NEWS＆amp;其他新闻块。我不知道如何在“主要新闻”的下方制作“其他新闻”块？有人可以帮我这个吗？

Answer 1

试试这段代码，希望对您有所帮助。您的代码空间，因为此代码按此标记的高度添加了空格。

<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>

更改你的html好像在这里，

<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">MAIN NEWS</h3>
    <h3 class="panel-title">OTHER NEWS</h3>
</div>   
<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>
</div>

Answer 2

由于其他新闻位于新列中，因此Bootstrap会尝试按照之前的元素添加此元素。

您应该尝试将网站分发到2个明确的列中，然后根据需要使用列中的行来分隔不同的元素。

GridView

更新

为了根据屏幕尺寸/设备类型以不同的顺序查看元素，我会隐藏一个div或另一个div，具体取决于设备：

<div class="row">
   <!-- FIRST COLUMN -->
   <div class="col-lg-8 col-md-8 col-xs-12">
       <h3 class="panel-title">MAIN NEWS</h3>
       <h3 class="panel-title">OTHER NEWS</h3>
    </div>
    <!-- SECOND COLUMN -->
    <div class="col-lg-4 col-md-4 col-xs-12">
        <h3 class="panel-title">CONTACT</h3>
        <h3 class="panel-title">COMMENT</h3>
        <h3 class="panel-title">MOST VIEWS</h3>
    </div>

</div>