CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Steve Giordano
Steve Giordano

Reputation: 133

Bootstrap moving elements between unnested rows

I am trying to do something very similar to this question except I need to move an element through multiple rows, not just one.

In desktop mode it should look like this (which my code currently does):

| A | B |

| C | D | E |

In tablet mode I need it to look like this:

| B |

| D |

| C | E |

| A |

The trouble is the A moving from the top to the bottom. Here is the html I have so far that does everything except move the 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>

I am hoping this does not require hiding and showing multiple sets of the same content or using jquery, just not sure if bootstrap can move an element like this using push and pull.

Thanks!

Upvotes: 0

Views: 756

Answers (1)

blayderunner123
blayderunner123

Reputation: 306

Here is your answer and it works I have tested it now stop dinging me with negative votes. Told you Give me today to do it. 

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

Here is the 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;
    }
}

View the Demo at http://jsfiddle.net/blayderunner123/h09geqz2/

Download it at: Download

Upvotes: 1

Related Questions