引导3：列排序 [英] Bootstrap 3: Column Ordering

问题描述

我有这三列。
在中等屏幕中，它应该像：列A（col-md-6）将在顶部，列B（col-md-6）在列A旁边，列C（col-md-

我有一个问题，进入这种排序。
这是我当前的代码：

 < 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> 
  

现在看起来像这样：

我检出了Bootstrap文档并使用了列推/ >

 < 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> 
  

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

在我的代码中错过了什么？

解决方案

您可以嵌套行 class in each other like like：

 < 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的宽度的两倍。

小提琴

I have these three columns. In a Medium screen, It should go like: Column A (col-md-6) will be at the top, Column B (col-md-6) beside Column A,and Column C (col-md-12) underneath Column A and B.

Like so:

I'm having a problem with coming up into this kind of ordering. Here's my current code:

<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>

It looks like this at the moment:

I checked out the Bootstrap Docs and used column pushing/pulling.

<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>

But this method seems to mess up the layout.

Did I miss something in my code? It doesn't go as I intended.

解决方案

You can nest your row classes within each other like so:

<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>

and then set a custom media query on the nested .content3 element

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

The above uses the same width break point as Bootstrap's .col-md-12. At that threshold, the width of .content3 becomes twice that of it's nesting DIV.

Fiddle

这篇关于引导3：列排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！