Changing HTML column order on specific width

Question

I want to change the order of the div on specific width (max-width : 640px). In my JSFiddle example I want the yellow box from the 2nd section to be under the text when the window width is smaller than 640px.

I want the 2nd section to act like first one at that width. Instead of the yellow boxes I will be using images so every time at that width images should be under the text, no matter how they are placed in html.

Here is the JSFiddle example.

    <!-- Cell 1 -->
    <div class="tableCell">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
    </div>

    <!-- Cell 2 -->
    <div class="tableCell">
        <div id="box"></div>
    </div>

Answer 1

Why CSS tables won't help in this case

Assuming two options to position the elements margin and position: relative, neither works on table cell elements. (margin is not applicable to table cells and also the effect of relative positioning is undefined for them).

8.3 Margin properties 'margin'

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

9.3.1 Choosing a positioning scheme: 'position' property

The effect of position:relative on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Therefore you probably need to use another layout scheme.

Choosing a layout method

There are two other options to create the columns, CSS floats and inline-blocks (Actually there are three. The third one, CSS Flexible box layout is only supported in modern web browsers at the time of writing; Hence I ignored that).

Since the contents should be aligned vertically at the middle, I'd go with using inline-block columns.

Important Note: You should remove the white-space between inline-block elements (the columns in this case) in order to prevent the layout from being broken (by two 50% columns).

Column ordering

In order to push and/or pull columns to a side, you could either use a positive/negative margin value or use relative positioning and specify left/right properties.

For instance, by using margin you'll have:

EXAMPLE HERE

.col {
    width: 50%;

    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    
    -webkit-box-sizing: border-box; /* to calculate width of the box including */
    -moz-box-sizing: border-box;    /* borders and padding (10px left/right)   */
    box-sizing: border-box;
}

.col.push-right { margin-left: 50%; }
.col.push-left { margin-left: -100%; }

@media only screen and (max-width : 640px) {
    .col {
        display: block;
        width: auto;
        text-align: center;
        padding: 10px;
    }
    
    .col.push-right, .col.push-left {
        margin-left: auto;
    }
}

Or by using relative positioning you'll end up with:

EXAMPLE HERE

.col {
    /* other declarations as above... */
    width: 50%;
    position: relative;
}

.col.push-right { left: 50%; }
.col.push-left { right: 50%; }

@media only screen and (max-width : 640px) {
    .col {
        /* other declarations... */
        display: block;
        width: auto;
    }

    .col.push-right { left: auto; }
    .col.push-left  { right: auto; }
}

Regardless of inline-block columns, this approach is widely used by most CSS frameworks such as Twitter Bootstrap and Zurb Foundation.

Additionally in both of the above approaches, your HTML markup should be changed like so:

<div class="container">
    <div class="col push-right">
        <p>Lorem ipsum....</p>
    </div><!--  comment out spaces/new lines/tabs between
                these two inline-block columns in order to remove the gap.
     --><div class="col push-left">
        <div id="box"></div>
    </div>
</div>

Answer 2

There is only one real way to change order in CSS that I know of (any other way is kind of a hack). You need to use flexbox.

The problem is that there is no way to distinguish between your parent elements whether it contains a box or not. I suggest adding extra classes.

That being said, this is how you can change the order of the second row:

.tableRow {
  display: flex;
  flex-direction: column-reverse;
}

or use the order properties

.tableRow {
  display: flex;
  flex-direction: column;
}
.tableCell {
  order: 2;
}
.tableCell:first-child {
  order: 1;
}

CSS-Tricks has a good flexbox reference.

Answer 3

You might want to play with :before and :after: jsfiddle.net/ra64oyk2

• On normal screen you'll use :before (left) and :after (right).

• On reduced screen you'll use :after.

Now you can delete the div containing the boxes.

To preserve your original layout, you'll need to alter the children of the .tableCell elements so they get a display: table-cell. Then, you may want to change some class names.

In order to know where to put the images on standard screen size, add some class names to the div.tableCell containg the text:

• imgRight for the 1st row

• imgLeft for the 2nd row.

Then you can add this to your CSS:

.tableCell.imgRight:after {
    content: ' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
}

.tableCell.imgLeft:before {
    content: ' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
}

.tableCell > * {
    display: table-cell;
    vertical-align: middle;
}


@media only screen and (max-width : 640px) {
    .tableCell > * {
        display: block !important;
    }
    .tableCell:after {
        content: ' ';
        width: 200px;
        height: 200px;
        background: yellow;
        display: block !important;
        margin: 0 auto;
    }
    .tableCell:before {
        display: none !important;
    }
}

Answer 4

To change the actual order of the HTML, the best (and least hackiest) way to do this will be with Javascript.

As you have the jQuery tag in your question, I'll assume that you'll be okay with using jQuery for changing the div order:

<!-- (best if you label those columns per-row e.g. firstColumn, secondColumn) -->
<div class="tableCell firstColumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
</div>

<div class="tableCell secondColumn"> 
    <div id="box"></div>
</div>

And then for your Javascript:

window.onresize = function(){
    if ($('body').width() < 640){
        //if body width is less than 640px, then put the second column before the first column
        $('.tableCell.firstColumn').insertAfter(".tableCell.secondColumn");
    }
    else{
        //if body width is more than or equal to 640px, then reset the ordering.
        $('.tableCell.secondColumn').insertAfter(".tableCell.firstColumn");
    }
}

You can further optimize the Javascript I wrote, but you get the idea.

Here's the demo that is applied to the first row: jsFiddle

Also, Cuth here also provided a very good answer: to use flexbox. If you're not worried about flexbox not being supported in some versions of IE and completely absent in Opera Mini, then I would strongly suggest you to use that answer instead.