Bootstrap 4 - Ordering left side item to bottom right in mobile view only

Question

I want to order the left side item to the bottom in mobile view only. As you can see, in mobile view it goes to the top, while I want to show content at beginning in mobile view.

Anyone can help me get them organized?

Here is the code:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
      <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
    </div>
    <div class="content-area col-xs-12 col-md-6">
      <button class="btn btn-lg btn-info btn-block"> Content</button>
      <button class="btn btn-lg btn-info btn-block"> Content</button>
    </div>
    <div class="col-xs-12 col-md-3">
      <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
      <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
    </div>
  </div>
</div>

take a look at css grid https://css-tricks.com/snippets/css/complete-guide-grid/ — Xanlantos, Dec 06 '18 at 16:32
see also https://stackoverflow.com/questions/15061520/responsive-css-styles-on-mobile-devices-only — Xanlantos, Dec 06 '18 at 16:33
I think, by using float or order, it should work fine, however i tried, but don't know the combination. — Chandan, Dec 06 '18 at 16:48

score 4 · Accepted Answer · answered Dec 06 '18 at 18:46

If you want to keep using bootstrap4 grid system, this is just a matter of assigning correct order to the columns: https://getbootstrap.com/docs/4.1/layout/grid/#order-classes

<div class="container-fluid">
    <div class="row">
        <div class="order-3 col-md-3 order-md-1">
            <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
            <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
        </div>
        <div class="order-1 content-area col-md-6 order-md-2">
            <button class="btn btn-lg btn-info btn-block"> Content</button>
            <button class="btn btn-lg btn-info btn-block"> Content</button>
        </div>
        <div class="order-2 col-md-3 order-md-3">
            <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
            <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
        </div>
    </div>
</div>

I have omitted your col-xs-12 because that's the default. From the beginning, I assigned order 3,1 and 2 to the sidebars and content so that the Left Sidebar will go to the bottom. And at md breakpoint and up, I re-assigned their orders to 1,2 and 3 so they go back to normal.

demo: http://jsfiddle.net/davidliang2008/aq9Laaew/287105/

Thanks David, It's working fine. You are right, i am new to bootstrap, so not much knowledge of order. Thanks Again — Chandan, Dec 06 '18 at 21:16

Bootstrap 4 - Ordering left side item to bottom right in mobile view only

1 Answers1