Need to get content in column 2 to jump into column 1 for mobile devices

Question

I have a table that needs to be changed in mobile view. I hide some columns with jquery for smaller devices but i also need to get content in column 2 to jump into column 1 for mobile devices.

Example table:

Desktop: content col1 | content col 2

Mobile: content col1 |content is now in col 1 and this empty col 2 must be hidden content col2 |

(Its a bootstrap page)

Answer 1

Perform once on page load (not on resize!):

// if mobile device
$('#column1').append($('#column2').html());
$('#column2').remove();

Answer 2

Try this:

HTML:

 <div class="col-md-12">
        <div class="row col-md-6">
            <table class="table table-striped table-condensed">
                <thead>
                    <tr>
                        <th>th is 0</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>cell is row 0, column 0</td>
                    </tr>
                    <tr>
                        <td>cell is row 1, column 0</td>
                    </tr>
                </tbody>
            </table>


            <div id="content1">
            </div>
        </div>
        <div id="col2" class="row col-md-6">
            <table class="table table-striped table-condensed">
                <thead>
                    <tr>
                        <th>th is 1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>cell is row 0, column 1</td>
                    </tr>
                    <tr>
                        <td>cell is row 1, column 1</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

SCRIPT:

$(window).resize(function () {
            Check();
        });
        $(document).ready(function () {
            Check();
        });


        function Check() {
            var contenbody = $('body');
            var ScreenWidth = screen.width;
            var clientWidth = contenbody[0].clientWidth;
            if ((ScreenWidth < 1200) || (clientWidth < 990)) {
                var data = $("#col2").html();
                $("#col2").hide();
                $("#content1").show();
                $("#content1").empty();
                $("#content1").append(data);
            } else {
                $("#col2").show();
                $("#content1").hide();
            }
        }