CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
user147215
user147215

Reputation:

Using Flexbox order with Bootstrap rows

I am trying to adjust the stacking order of columns within two bootstrap rows. I have two rows, each with two columns. In my JSBin example below, I am trying to stack the order on a phone to thing a, thing b, thing d and thing c.

I am trying to use flex box in a media query to adjust the order of the columns using the flexbox order property without success. From my research, I wrapped both rows in a wrapper div with display:flex and set the order on each column, but this isn't working...

https://output.jsbin.com/wixogafebe/

Upvotes: 0

Views: 6705

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371221

For the flex order property to work, all flex items must be siblings in the same container.

In your case, you have one flex container (.flex) with two flex items (.row).

One flex item contains A and B. The other flex item holds C and D.

Under your current set-up, only the flex items (.row) can be re-ordered with the order property.

In fact, A, B, C, D aren't even flex items, because their parent isn't a flex container. So flex properties won't apply to them.

In order to make your layout work as you want, you would need to place all four elements in the same flex container, so they exist as sibling flex items.

Example:

HTML

<div class="container">

    <div class="col-lg-8 col-xs-12 a">        <!-- flex item #1 -->
        <div class="thing">
            Thing A
        </div>
    </div>

    <div class="col-lg-4 col-xs-12 b">        <!-- flex item #2 -->
        <div class="thing">
            Thing B
        </div>
    </div>

    <div class="col-lg-8 col-xs-12 c">        <!-- flex item #3 -->
        <div class="thing">
            Thing C
        </div>
    </div>

    <div class="col-lg-4 col-xs-12 d">        <!-- flex item #4 -->
        <div class="thing">
            Thing D
        </div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
}

.col-xs-12 {
    display: flex;
    flex: 0 0 50%;
}

.thing {
    background-color: #eaeaea;
    flex: 1;
    margin: 10px;
    padding: 15px;
}

@media screen and ( max-width: 800px) {

    .a { order: 1; }
    .b { order: 2; }
    .c { order: 4; }
    .d { order: 3; }
    .b > div { background-color: red; }

}

DEMO

Upvotes: 1

C3roe
C3roe

Reputation: 96306

You can only order flex items within their flex container – not across multiple containers.

a and b are in the right order within their container here already, so no need to mess with them. Only your second row needs to be made a flex container, and only element c needs to be put in the back:

.row-2 { /* I added that class to your second .row element, but applying
            it to both rows should do no harm either */
  display: flex;
  flex-direction: column;
}

.c {
  order: 1; /* make this one single element “take a step back” */
}

Upvotes: 0

Related Questions