Question

我正在尝试做一些与this question非常相似的事情，除了我需要将一个元素移动到多行，而不只是一行。

在桌面模式下，它应该如下所示（我的代码目前正在执行）：

| A | B |

| C | D | E |

在平板电脑模式下，我需要它看起来像这样：

| B |

| D |

| C | E |

| A |

问题是A从顶部移动到底部。这是我到目前为止的html除了移动A：

之外的所有事情

<div class="row" id="subheader">
    <div class="col-md-3" id="subnav">
        A
    </div>
    <div class="col-md-9">
        B       
    </div>      
</div>
<div class="row" id="content">
    <div class="col-md-6 col-md-push-3">
        D
    </div>
    <div class="col-md-3 col-md-pull-6 col-xs-6" id="services">
        C
    </div>
    <div class="col-md-3 col-xs-6" id="pagenav">
        E
    </div>
</div>

我希望这不需要隐藏和显示多组相同的内容或使用jquery，只是不确定bootstrap是否可以使用推拉来移动这样的元素。

谢谢！

Answer 1

这是你的答案，它的确有效我现在已经测试了它，现在不再用负面投票给我了。告诉你今天给我这样做。

 <!DOCTYPE html>
      <html>
           <head>
                <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
                <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
                <link href="css/style.css" rel="stylesheet" media="all">
            </head>
            <body>
                <div class="container">
                    <div class="row">
                        <div class="flex-container">
                <header>Header A</header>
                <header>Header B</header>
                    <div class="child">
                        <article class="flex-item">
                            <p>Content C</p>  
                        </article>
                        <article class="flex-item">
                            <p>Content D</p>  
                        </article>
                        <article class="flex-item">
                            <p>Content E</p>  
                        </article>
                    </div>
                </div>
            </div>
        </div>
         <!-- Javascript goes here -->
    </body>
</html>

这是CSS：

/* Global Styles */
@charset "utf-8";
*, *:before, *:after{
     -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
             box-sizing: border-box !important;
}

body{
width: 100%;
height: 100%;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow-x:hidden;
}

html{
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
}

@-moz-document url-prefix(){
    .flex-container{
        width: 100%;
        -moz-box-sizing: border-box;
}

}

.flex-container{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;   
    flex-flow:row wrap;
}

header{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow:row wrap;
    order:1;
}

/* Flex-box section */
header > *{

}

header:nth-child(1){
    width:100%;
    display: block;
    flex:1 auto;
    order:6;
    padding: 10px;
    text-align: center;
    background: deepskyblue;
}

header:nth-child(2){
    width:100%;
    padding: 10px;
    text-align: center;
    background: tomato;
    display: block;
    flex:1 auto;
    order:1;
}

.child{
    display:flex;
    width:100%;
    order:2;
    text-align:center;
    flex-flow:row wrap;
}

.child > * {
    padding: 10px;
    display:inline-flex;
}

.flex-item:nth-child(1){
    display:block;
    flex:1 auto;
    text-align:center;
    background: gold;
    order:2;
}

.flex-item:nth-child(2){
    display:block;
    width:100%;
    text-align:center;
    background: hotpink;
    order:1;
}

.flex-item:nth-child(3){
    display:block;
    flex:1 auto;
    text-align:center;
    background: orange;
    order:3;
}

@media(min-width: 800px){
header{
    display:block;
}

    header:nth-child(1){
    width:50%;
    display: block;
    order:1;
    padding: 10px;
    text-align: center;
    background: deepskyblue;
}

header:nth-child(2){
    width:50%;
    padding: 10px;
    text-align: center;
    background: tomato;
    display: block;
    order:2;
}

.child > *{
    display:block;
}

.flex-item:nth-child(1){
    display:block;
    width:33.333%;
    text-align:center;
    background: gold;
    order:1;
}

.flex-item:nth-child(2){
    display:block;
    width:33.333%;
    text-align:center;
    background: hotpink;
    order:2;
}

.flex-item:nth-child(3){
    display:block;
    width:33.333%;
    text-align:center;
    background: orange;
    order:3;
    }
}

在http://jsfiddle.net/blayderunner123/h09geqz2/

查看演示

下载地址：Download

Bootstrap在unnested行之间移动元素

1 个答案: