Is changing table-cell order possible?

I have 3 divs/coumns which all must be the same height - hence the reason why I am using display:table on the parent div. What my question is - can the columns (that are now displaying as ‘table-cells’) change order?
eg.
Desktop breakpoint the columns display as A | B | C
Tablet breakpoint the columns display as B | A | C

Or does changing the divs to display as “table/table-cell” restrict the ability to change their positions?

Would be helpful if you can create a fiddle for your code. http://jsfiddle.net http://codepen.io

Did you try setting “float: left/right” on those DIV?

Another alternative is to use Flexbox instead of table. It does allow you to change the order of the flex container’s children.
It will work if you don’t need to support very old browsers.

To answer your question, no it’s not possible with the table/table-cell method.

You could use the display:table-cell approach for desktop browsers and then switch to flexbox in the media queries for smaller devices. Browsers that don’t support flexbox could just get display;block and source order. Support for flexbox is pretty good on mobiles.

I had a go at doing this, it seems to work.
CSS

body    {
                background: #666;
                text-align: center;
                padding: 0;
            }
            #content    {
                background: #fff;
                width: 80%;
                margin: 0 auto;
                padding-bottom: 1em;
            }
            .table  {
                width: 80%;
                margin: 0 auto;
                margin-bottom: 1em;
                display: table;
                padding: 4px;
                background: #ddd;
            }
            .table div  {
                width: 32%;
                margin-bottom: 4px;
                display: table-cell;
            }
            #cola   {background: #fad;}
            #colb   {background: #af0;}
            #colc   {background: #fd0;}
            
            @media screen and (max-width: 600px) {
                #content    {width: 96%;}
                .table  {
                     display: flex;
                    justify-content: space-around;
                    width: 94%;
                }
                .table div  { display: inline-block;}
                #cola   {order: 2;}
                #colb   {order: 1;}
                #colc   {order: 3;}
            }
            @media screen and (max-width: 400px) {
                #content    {
                    width: 100%;
                    margin: 0;
                    }
                .table  {flex-direction: column;}
                .table div  {width: 100%;}
            }

HTML

<body>
        <div id="content">
            <h1>Title</h1>
            <div class="table">
                <div id="cola">Column A</div>
                <div id="colb">Column B</div>
                <div id="colc">Column C</div>
            </div>
        </div>
    </body>

I put in another break to go vertical on very small screens.

1 Like

That probably needs the appropriate prefixes though. Flex is definitely still at a point where prefixes are a great idea.

Yes, worth mentioning.
This was a quick lazy example to try it out. I’m just experimenting with and learning about flex myself. In a live page I would add prefixes.

Yes it is:)

Although I wouldn’t recommend using it :wink:

1 Like

You’re one of those people that like watching the world burn.

Thanks for your feedback everyone. I’ve not used Flex before so will definitely look into it further.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.