Question

我有这三列。在中等屏幕中，它应该是这样的：列A（col-md-6）将位于顶部，列B（col-md-6）位于列A旁边，列C（列-md-12）位于列下方A和B.

像这样：

planned structure

我遇到了这种订购的问题。这是我目前的代码：

<div class="container">
   <div class="row">
    <div class="col-md-12">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
      </div>

      <div class="content3 col-xs-12 col-md-12">
        12-Col-[Medium] C
      </div>

      <div class="content2 col-xs-12 col-md-6">
        6-Col-[X-Small] B
      </div>
    </div>
  </div>
</div>

此刻看起来像这样： current code

我检查了Bootstrap Docs并使用了列推/拉。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
      </div>

      <div class="content3 col-xs-12 col-md-12 col-md-push-6">
        12-Col-[Medium] C
      </div>

      <div class="content2 col-xs-12 col-md-6 col-md-pull-12">
        6-Col-[X-Small] B
      </div>
    </div>
  </div>
</div>

但这种方法似乎搞乱了布局。

messed up layout

我的代码中是否遗漏了一些内容？它没有按照我的意图去做。

Answer 1

您可以将row类嵌套在彼此中，如下所示：

<div class="container">
   <div class="row">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
        <div class="row">
           <div class="content3 col-xs-12 col-md-12">
             12-Col-[Medium] C
           </div>
        </div>
      </div>
      <div class="content2 col-xs-12 col-md-6">
        6-Col-[X-Small] B
      </div>
   </div>
</div>

然后在嵌套的.content3元素

上设置自定义媒体查询

@media(min-width: 992px){
    .content3{
        width: calc(100% * 2);
    }
}

以上使用与Bootstrap的.col-md-12相同的宽度断点。在该阈值处，.content3的宽度变为其嵌套DIV的两倍。

Fiddle

Answer 2

    <div class="container">
            <div class="row">
                    <div class="content1 col-md-6">
                    6-Col-[X-Small] A
                    </div>
                    <div class="content2 col-xs-12 col-md-6">
                    6-Col-[X-Small] B
                    </div>
            </div>
            <div class="row">
                    <div class="content3 col-xs-12 ">
                    12-Col-[Medium] C
                    </div>
            </div>
    </div>

Answer 3

您必须复制部分内容（b或c列）并将visible-xs和hidden-xs添加到相应的内容版本中。最初，我不喜欢复制内容的想法，但后来意识到它对于优化是有意义的，因为我可以根据设备加载更大/更小的照片。

See my previous similar question，@ paulalexandru提供了一个很好的例子Fiddle。

以下是您的示例内容的设置，以及 Fiddle ：

<div class="container">
  <div class="row">

    <div class="col-md-12">

      <div class="content1 col-md-6 purple">
        6-Col-[X-Small] A
      </div>

      <div class="content3 col-md-12 visible-xs blue">
        12-Col-[Medium] C
      </div>

      <div class="content2 col-md-6 red">
        6-Col-[X-Small] B
      </div>

      <div class="content3 col-md-12 hidden-xs green">
        12-Col-[X-Small] C V2
      </div>

    </div>
  </div>
</div>

注意：blue, red, green, purple课程可让您更轻松地了解示例中的内容。

此外，如果你的内容是col-xs-12并希望它在更大的屏幕上也是col-12，那么它将自动发生。不要指定col-xs-12 and col-md-12如果你这样做，似乎会甩掉身高（在这个例子中反正 - 为什么对我来说有点不清楚，但是那个旁边的点）。

病人：＆＃34;当我这样做时会疼吗？＆＃34; 博士：＆＃34;不要这样做。＆＃34; ：）

另外，您还会注意到sm处布局的第二次跳转，因为它存在于xs和md之间。假设您不想要，则应在示例中将col-md-*替换为col-sm-*。除非你想要这样做。

Bootstrap 3：列排序

3 个答案: