Bootstrap 4 and column ordering

[tmrd]

Hello everyone! I hope you’re having a great day.

I downloaded Bootstrap, set $enable-flex true and recompiled.

I have a question about Bootstrap 4 and flexbox. If you reduce the size of Twitter homepage, you can see that “Who to follow” part is moving to the left side of the site (but main feed doesn’t get effected by that), and this is the thing I want to do using Bootstrap 4 and flexbox. So, when I resize the window (for an hypothetical size like -sm), #right will start after #left. #middle is the feed section.

How can I do it? I know that it can be arranged using jQuery/Javascript, but things get complicated and I have to use px instead or em that way.

Here’s my current setup.

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2" id="left">
            <div class="col-md-12">PROFILE</div>
            <div class="col-md-12" id="menu">MENU</div>
        </div>
        <div class="col-sm-9 col-md-7" id="middle">NEWS</div>
        <div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
    </div>
</div>

CSS

#left{
    background:yellow;
}

#middle {
    background:brown;
}

#right {
    background:#a8d6fe;
}

[RyanReese]

So you’re using flexbox version of bootstrap, yes? You can set the order: https://developer.mozilla.org/en-US/docs/Web/CSS/order

For applying it at certain screen sizes, just combine it with media queries.

[tmrd]

I created something like below, but this isn’t the thing I want.

@media (max-width: 767px) {
    #left {
        order:1;
    }

    #right {
        order:1;
    }

    #middle {
        order:2;
    }
}

I want this:

Instead of this:

[RyanReese]

Unless you did Javascript to restructure, the right part would need to be inside of the news element. What you have right now (HTML) won’t work.

[tmrd]

Okay, two more questions then.

1-) If I use something like below, I will have to remove some classes (col-sm-3 and col-md-3) and add another (col-md-12) to #right since I’ll have to place #right inside #left. This is easy, but is it okay to do?

2-) How can I restructure it with Javascript without breaking responsiveness? I can work with pixels only for now (width() < 768), but Bootstrap 4 is based on ems. Is there a way to tell Javascript to work with ems instead of pixels?

$(document).ready(function () {
            if($(window).width() < 768){
                $("#right1").after("#menu");
            }
        });