Bootstrap stack elements top and bottom on mobile, sidebar on desktop

1103 views html

I have three elements in my layout, top bar, content and bottom bar.

I am using twitter bootstrap 4

On mobile I want them to stack as such:

top bar
bottom bar

on desktop I want this:

content    top bar
           bottom bar

a visual guide: enter image description here

How do I even? I can't seem to get them to line up properly and I'm way down the bottom of a rabbit hole here so I'm asking the stack.

answered question

Post the code you've tried so far

1 Answer


You can use the order class to reorder your elements when changing viewports.

Check it here:

posted this

Have an answer?


Please login first before posting an answer.